HTML5--(2)属性选择器+结构性伪类+伪类
一.属性选择器
- [att] 匹配所有具有att属性的
- [att=val] 匹配所有att属性等于“val”的
- [att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一个完整词)
- [att|=val] 匹配所有att属性仅仅只等于以val-’ 开头的或等于“val”(比如说zh-cn)
- [att*=val] 匹配所有att属性 包含’val’的字母 (val可以是字母) 类似模糊查询
- [att^=val] 匹配所有att属性 ‘val’开头的 (val可以是字母)
- [att$=val] 匹配所有att属性 ‘val’结束的 (val可以是字母)
二.结构性伪类
- E:nth-child(n) 表示E父级的所有子元素集合中的,第n个子节点(从前往后数 兄弟同类型标签 不可跨越其他类型标签 按所有标签索引顺序去选择)
- E:nth-last-child(n) 表示E父级的所有子元素集合中的,第n个子节点,从后向前计算 (从后往前数)
(需E选择器能选中此元素) - E:nth-of-type(n) 表示E元素父级的子元素是E集合,第n个字节点,(兄弟同类型标签 可跨越其他类型标签 按同类型标签索引顺序去选择)
- E:nth-last-of-type(n) 表示E父级的第n个字节点,从后向前计算
(需E选择器能选中此元素,且区分标签类型) - E:nth-child(odd) 匹配奇数行 同p:nth-child(2n-1)
- E:nth-child(even) 匹配偶数行 同p:nth-child(2n)
- E:empty 表示E元素中没有子节点(不能有空格,回车)。注意:子节点包含文本节点
三.伪类
- E:target 当a标签获取焦点href=”所对应的 E元素锚点的对象(超链接跳转对象)
- E:disabled 表示不可点击的表单控件disabled(禁止选中)
- E:enabled 表示可点击的表单控件
- E:checked 表示已选中的checkbox或radio (鼠标点击时)
- E:first-line 表示E元素中的第一行
- E:first-letter 表示E元素中的第一个字符(首字)
- E::selection 表示E元素在用户选中文字时
- E:not(selector) 选择非 selector 选择器的每个元素。
- E~F 表示E元素后的所有兄弟F元素(~不需要紧挨着 +需要紧挨着 毗邻)
其他属性 input::placeholder 改变文本框中提示字体样式
兼容写法input::-webkit-input-placeholder
HTML5--(2)属性选择器+结构性伪类+伪类的更多相关文章
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- CSS笔记——属性选择器
1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- css 为元素选择器,css目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器
伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
随机推荐
- 【cocos2d-x 手游研发小技巧(3)Android界面分辨率适配方案】
先感叹一下吧~~android的各种分辨率各种适配虐我千百遍,每次新项目我依旧待它如初恋···· 每家公司都有自己项目工程适配的方案,这种东西就是没有最好,只有最适合!!! 这次新项目专项针对andr ...
- 流式处理框架storm浅析(下篇)
本文来自网易云社区 作者:汪建伟 举个栗子 1 实现的目标 设计一个系统,来实现对一个文本里面的单词出现的频率进行统计. 2 设计Topology结构: 这是一个简单的例子,topology也非常简单 ...
- ubuntu emacs的安装
在终端依次输入这三条命令即可 sudo add-apt-repository ppa:ubuntu-elisp/ppa sudo apt-get update sudo apt-get install ...
- Ceph 的基础数据结构 [Pool, Image, Snapshot, Clone]
原文链接:http://www.cnblogs.com/sammyliu/p/4843812.html?utm_source=tuicool&utm_medium=referral 1 Poo ...
- 20165219 Exp1 PC平台逆向破解
20165219 Exp1 PC平台逆向破解 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串 ...
- 【OCP-12c】2019年CUUG OCP 071考试题库(80题)
80.View the exhibit and examine the structure in ORDERS and ORDER_ITEMS tables. You need to create a ...
- poj 3133 Manhattan Wiring
http://poj.org/problem?id=3133 考虑插头 dp 用四进制表示一个插头的状态,0 表示没有插头,2 表示这个插头是连接两个 2 的,3 同理 然后就是大力分类讨论了 这题还 ...
- samba服务器的安装与配置(之前是因为没有把共享文件权限放开!)(windows7和centOS6)
注:centOS6跟centOS7安装方法不一样哦.以下是centOS6的安装过程. 安装:yum -y install samba 启动:/etc/init.d/smb start 设置开机启动:c ...
- leetcode-49-字母异位词分组(神奇的哈希)
题目描述: 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", "t ...
- main:处理命令行选项
有时我们需要给main函数传递实参, 我们可以把命令行选项通过两个形参传递给main函数: int mian(int argc, char *argv[]) { ... }; argv是argumen ...