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元素。