CSS3提供了多种强大的选择器,共有五大类选择器: 基础选择器、层次选择器、伪类选择器、伪元素选择器、属性选择器。其中,伪类选择器又可分为六个小类别: 动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器、目标伪类选择器、语言伪类选择器、否定伪类选择器。 简单来记5+6

在本文中,E和F均指某种选择器(任意其他类型选择器),或匹配相应选择器的元素。

基础选择器

自CSS1开始就存在的元老级选择器们,所有浏览器都支持。

序号类型格式匹配元素备注
1通用选择器*任意元素
2元素选择器E对应元素E可以是任意HTML元素
3ID选择器#id具有对应id的元素
4class选择器.class具有对应class的元素
5群组选择器E, F既匹配E,又匹配F多种选择器以’,’分隔,设定相同的样式时使用

层次选择器

同样是较早期就出现的选择器,除IE6外均支持。

序号类型格式匹配元素
1后代(包含)选择器E FF是E的子(孙)元素
2子选择器E > FF是E的子元素,可以看作是后代选择器的特例
3相邻兄弟选择器E + FF是位于E后面,第一个兄弟元素
4通用兄弟选择器E ~ FF是位于E后面的所有兄弟元素

伪类选择器

伪类选择器均以冒号:开始,如:hover。但是注意,以:开头的未必是伪类选择器,也有可能是伪元素选择器,如:before

动态伪类选择器

动态伪类选择器主要有两种,一种是在链接中常见的锚点伪类,另一种是用户行为伪类。

可以较放心地使用动态伪类选择器,IE8+均支持。低版本的IE浏览器对:active:focus的支持不好。IE6中对:hover仅支持<a>元素。

序号类型格式匹配元素备注
1链接伪类选择器E:linkE元素被定义了超链接且未被访问过
2链接伪类选择器E:visitedE元素被定义了超链接且已经被访问过
3用户行为伪类选择器E:hover鼠标悬停在E元素上IE6及以下仅支持<a>元素
4用户行为伪类选择器E:focusE元素获得焦点IE8+
5用户行为伪类选择器E:activeE元素被激活常用于锚点与按钮上,IE8+

UI元素状态伪类选择器

UI元素的状态一般包括:启用、禁用、选中、未选中、获得焦点、失去焦点、锁定、待机。HTML元素中一般有可用、不可用、选中、未选中状态。

格式匹配元素
E:checked选中状态
E:enabled可用状态
E:disabled不可用状态

否定伪类选择

用来定位不匹配的元素,起到过滤的作用。

格式匹配元素备注
E:not(F)匹配除F以外的E元素IE9+

目标伪类选择器

目标选择器是动态选择器,只有当URL指向该元素时,样式效果才会生效。

格式匹配元素备注
E:targetE元素被URL指向IE9+,Opera9.6+

语言伪类选择器

语言伪类选择器是根据文档的语言信息匹配元素。语言信息包含在文档中或与文档关联:

  1. 在文档中指定(HTML5)
    1. <!DOCTYPE html>
    2. <html lang="en-us">
  2. 在文档中指定
    1. <body lang="fr">
格式匹配元素备注
E:lang(language)E元素指定了lang属性,且其值为languageIE8+,Opera9.2+

在IE6里只能使用类选择器来实现,IE7里可以使用属性选择器:E[lang|="en"]

结构伪类选择器

根据元素在DOM树中的某些特性(如相对位置)来定位。

序号格式匹配元素备注
1E:rootE所在文档的根元素即html
2E:emptyE没有任何子元素,也没有任何文本节点E就是空的
3E:first-childE是其父元素的第一个子元素等同于E:nth-first-child(1)
4E:last-childE是其父元素的最后一个子元素等同于E:nth-last-child(1)
5E:nth-child(n)E是其父元素的第n个元素n可以是整数(1、2、3),关键字(odd,even),公式(n+1、2n-1,n以1开始)
6E:nth-last-child(n)E是其父元素的倒数第n个元素同上
7E:only-childE元素是其父元素的唯一子元素,且匹配E
8E:first-of-type父元素内具有指定类型E的第一个元素等同于E:nth-of-type(1)
9E:last-of-type父元素内具有指定类型E的的最后一个元素等同于E:nth-last-of-type(1)
10E:nth-of-type(n)父元素内具有指定类型E的第n个元素n可以是整数(1、2、3),关键字(odd,even),公式(n+1、2n-1,n以1开始)
11E:nth-last-of-type(n)父元素内具有指定类型E的倒数第n个元素同上
12E:only-of-type匹配E的元素,且该元素是其父元素内唯一能匹配E的元素

伪元素选择器

新标准中建议使用两个冒号::,以与伪类选择器区分开;同时对伪元素选择器继续支持单个冒号的写法:

序号格式匹配元素备注
1E::beforeE元素之前是页面中额外可以插入内容的地方,
不会出现在DOM树中
2E::afterE元素之后是页面中额外可以插入内容的地方,
不会出现在DOM树中
3E::selectionE元素中被选中的文本仅支持backgroundcolor
两个属性
4E::first-letter第一个单词
5E::first-line第一行

属性选择器

序号格式匹配元素备注
1E[attr]有attr属性
2E[attr=val]attr属性值等于val
3E[attr~=val]attr属性值包括val且val前后有空格
4E[attr*=val]attr属性值包括val
5E[attr|=val]attr属性值是val或以
val-开头
p[lang|=en]对以下两种情况都可以匹配
<p lang="en">
<p lang="en-us">
6E[attr^=val]attr属性值以val开头5不同,
p(lang^=en)还可以匹配
<p lang="english">,而5不行
7E[attr$=val]attr属性值以val结尾

To be continued