CSS3选择器清单
发布于 2015-08-21
选择器是css中一个很重要的内容，使用选择器可以提高在开发过程中修改样式表时的工作效率，并且使css的编写结构更加清晰和简单。css3在以前版本的基础上又添加的一些新的选择器，所以今天来总结一下css3选择器的特性及用法。
属性选择器
css3新增了3个属性选择器，分别是E[foo^=”bar”]、E[foo$=”bar”]、E[foo*=”bar”]。
- E[foo^=”bar”]: 匹配定义了foo属性，并且前缀为”bar”的E元素
- E[foo$=”bar”]: 匹配定义了foo属性，并且后缀为”bar”的E元素
- E[foo*=”bar”]: 匹配定义了foo属性，并且属性值包含”bar”的E元素
当省略属性选择器前不加”E”的时候，表示匹配任意类型元素。这三个属性选择器遵循惯用编码规则，选用”^”,”$”,”*”分别代表开始、结束、任意。
结构伪类选择器
- E:root 匹配E元素所在文档的根元素，一般根元素就是Html
- E:nth-child(n) 匹配所在父节点中第n个位置的E元素(子节点))。
- E:nth-last-child(n) 匹配所在父节点倒数第n个位置的E元素(与上面的类似)
- E:nth-of-type(n) 匹配所在父节点中第n个位置的同类型的E元素，其它类型元素不参与排序
- E:nth-last-of-type(n) 匹配所在父节点中倒数第n个位置的同类型的E元素
- E:last-child 义如其名，就是匹配所在父节点中最后一个E元素
- E:first-of-type 匹配所在父节点中第一个同类型的E元素
- E:last-of-type 匹配所在父节点中最后一个同类型的E元素
- E:only-child 匹配所在父节点中只包含一个元素，且该元素正是E
- E:only-of-type 匹配所在父节点中包含一个同类型元素，且该元素是E
- E:empty 匹配E元素，且该元素不含子节点
注意文本也属于节点
以上，n可以是从1开始的数字，也可以是公式，如2n(匹配偶数)，2n+1(匹配奇数)，也可以是关键字odd(匹配奇数)，even(匹配偶数
UI伪类选择器
在css3中除了结构性伪类选择器，还有UI伪类选择器。这些选择器的共同特征是：指定的样式只有在处于某种状态时才会起作用。
- E:enabled 匹配用户界面上所有可用的元素E
- E:disabled 匹配用户界面上所有不可用的元素E
- E:checked 匹配用户界面上处于选中状态的元素E
其它选择器
- E~F 兄弟选择器，匹配E元素后的所有F元素，两者处于同一级结构上。
- E:not(s) 否定选择器，匹配除了符合”s”选择符的E元素,”s”是一个简单结构选择器。
- E:target 匹配被URL选中的E元素，如”w3cay.com/#element”会匹配id=”element”的E元素。
