2.6 伪选择器
伪选择器包括伪类选择器和伪对象选择器，伪选择器能够根据元素或对象的特征、状态、行为进行匹配。
伪选择器以冒号(：)作为前缀标识符。冒号前可以添加限定选择符，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格。
CSS伪类选择器有以下两种用法方式。
单纯式
E:pseudo-class { property:value}
其中E为元素，pseudo-class为伪类名称，property是CSS的属性，value为CSS的属性值。例如：
a:link {color:red;}
- 混用式
E.class:pseudo-class{property:value}
其中.class表示类选择符。把类选择符与伪类选择符组成一个混合式的选择器，能够设计更复杂的样式，以精准匹配元素。例如：
a.selected:hover {color: blue;}
CSS3支持的伪类选择器具体说明如表2.1所示，CSS3支持的伪对象选择器具体说明如表2.2所示。
表2.1 伪类选择器列表
表2.2 伪对象选择器列表
由于CSS3伪选择器众多，下面仅针对CSS3中新增的伪类选择器进行说明，其他选择器请读者参考CSS3参考手册详细了解。
2.6.1 结构伪类
结构伪类是根据文档结构的相互关系来匹配特定的元素，从而减少文档元素的class属性和ID属性的无序设置，使得文档更加简洁。
结构伪类形式多样，但用法固定，以便设计各种特殊样式效果，结构伪类主要包括下面几种，简单说明如下。
- :fist-child：第一个子元素。
- :last-child：最后一个子元素。
- :nth-child()：按正序匹配特定子元素。
- :nth-last-child()：按倒序匹配特定子元素。
- :nth-of-type()：在同类型中匹配特定子元素。
- :nth-last-of-type()：按倒序在同类型中匹配特定子元素。
- :first-of-type：第一个同类型子元素。
- :last-of-type：最后一个同类型子元素。
- :only-child：唯一子元素。
- :only-of-type：同类型的唯一子元素。
- :empty：空元素。
【示例1】下面的示例设计了排行榜栏目列表样式，效果如图2.17所示。在列表框中为每个列表项定义相同的背景图像。
图2.17 设计推荐栏目样式
设计列表结构，代码如下。
设计的列表样式请参考本节示例源代码。下面结合本示例分析结构伪类选择器的用法。
1. :first-child
【示例2】如果设计第一个列表项前的图标为1，且字体加粗显示，则使用:first-child匹配。
2. : last-child
【示例3】如果单独给最后一个列表项定义样式，就可以使用:last-child来匹配。
#wrap li:last-child {background-position:2px -277px;}
显示效果如图2.18所示。
3. :nth-child()
:nth-child()可以选择一个或多个特定的子元素。它有如下多种用法。
在:nth-child()中，参数length为一个整数，n表示一个从0开始的自然数。
:nth-child()可以定义值，值可以是整数，也可以是表达式，用来选择特定的子元素。
【示例4】下面6个样式分别匹配列表中第2 ~ 7个列表项，并分别定义它们的背景图像Y轴坐标位置，显示效果如图2.19所示。
图2.18 设计最后一个列表项样式
图2.19 设计每个列表项样式
注意，这种函数参数用法不能引用负值，也就是说li:nth-child(-3)是不正确的使用方法。
- :nth-child(n)
在:nth-child(n)中，n是一个简单的表达式，它取值是从0开始计算的，到什么时候结束是不确定的，需结合文档结构而定，如果在实际应用中直接这样使用的话，将会选中所有子元素。
【示例5】在上面的示例中，如果在li中使用:nth-child(n),那么将选中所有的li元素。
#wrap li:nth-child(n) {text-decoration:underline;}
则这个样式类似于：
#wrap li {text-decoration:underline;}
其实，nth-child(n)是这样计算的：
n=0：表示没有选择元素。
n=1：表示选择第一个li元素。
n=2：表示选择第二个li元素。
依此类推，这样下来就选中了所有的li元素。
- :nth-child(2n)
【示例6】:nth-child(2n)是:nth-child(n)的一种变体，使用它可以选择n的2倍数，当然其中2可以换成需要的数字，分别表示不同的倍数。
#wrap li:nth-child(2n) {font-weight:bold;}
等价于：
#wrap li:nth-child(even) {font-weight:bold;}
预览效果如图2.20所示。
图2.20 设计偶数行列表项样式
其实现过程如下。
当n=0，则2n=0，表示没有选中任何元素。
当n=1，则2n=2，表示选择了第二个li元素。
当n=2，则n=4，表示选择了第四个li元素。
依此类推。
如果是2n，这样与使用even命名class定义样式所起到的效果是一样的。
- :nth-child(2n-1)
【示例7】:nth-child(2n-1)是在:nth-child(2n)基础上演变来的，既然:nth-child(2n)表示选择偶数，那么在它的基础上减去1就变成奇数选择。
#wrap li:nth-child(2n-1) {font-weight:bold;}
等价于：
#wrap li:nth-child(odd) {font-weight:bold;}
其实现过程如下。
当n=0，则2n-1=-1，表示没有选中任何元素。
当n=1，则2n-1=1，表示选择第一个li元素。
当n=2，则2n-1=3，表示选择第三个li元素。
依此类推。
其实这种奇数效果，还可以使用:nth-child(2n+1)和:nth-child(odd)来实现。
- :nth-child(n+5)
【示例8】:nth-child(n+5)是从第五个子元素开始选择。
li:nth-child(n+5) {font-weight:bold;}
其实现过程如下。
当n=0，则n+5=5，表示选中第五个li元素。
当n=1，则n+5=6，表示选择第六个li元素。
依此类推。
可以使用这种方法选择需要开始选择的元素位置，也就是说换了数字，起始位置就变了。
- :nth-child(-n+5)
【示例9】:nth-child(-n+5)刚好和:nth-child(n+5)相反，是选择第五个前面的子元素。
li:nth-child(-n+5) {font-weight:bold;}
其实现过程如下。
当n=0，则-n+5=5，表示选择了第五个li元素。
当n=1，则-n+5=4，表示选择了第四个li元素。
当n=2，则-n+5=3，表示选择了第三个li元素。
当n=3，则-n+5=2，表示选择了第二个li元素。
当n=4，则-n+5=1，表示选择了第一个li元素。
当n=5，则-n+5=0，表示没有选择任何元素。
- :nth-child(5n+1)
:nth-child(5n+1)是实现隔几选一的效果。
【示例10】如果是隔三选一，则定义的样式如下。
li:nth-child(3n+1) {font-weight:bold;}
其实现过程如下。
当n=0，则3n+1=1，表示选择了第一个li元素。
当n=1，则3n+1=4，表示选择了第四个li元素。
当n=2，则3n+1=7，表示选择了第七个li元素。
设计效果如图2.21所示。
图2.21 设计隔三选一行列表项样式
4. :nth- last-child()
【示例11】:nth-last-child()与:nth-child()相似，但作用与:nth-child不一样，:nth-last-child()只是从最后一个元素开始计算，来选择特定元素。
li:nth-last-child(4) {font-weight:bold;}
上面代码表示选择倒数第四个列表项。
其中:nth-last-child(1)和:last-child所起的作用是一样的，都表示选择最后一个元素。
另外，:nth-last-child()与:nth-child()用法相同，可以使用表达式来选择特定元素，下面来看几个特殊的表达式所起的作用。
:nth-last-child(2n)表示从元素后面计算，选择的是偶数个数，反过来说就是选择元素的奇数，与前面的:nth-child(2n+1)、:nth-child(2n-1)、:nth-child(odd)所起的作用是一样的。例如：
li:nth-last-child(2n) { font-weight:bold;}
li:nth-last-child(even) {font-weight:bold;}
等价于：
li:nth-child(2n+1) {font-weight:bold;}
li:nth-child(2n-1) {font-weight:bold;}
li:nth-child(odd) {font-weight:bold;}
:nth-last-child(2n-1)刚好与上面相反，从后面计算选择的是奇数，而从前面计算选择的就是偶数了，例如：
li:nth-last-child(2n+1) {font-weight:bold;}
li:nth-last-child(2n-1) {font-weight:bold;}
li:nth-last-child(odd) {font-weight:bold;}
等价于：
li:nth-child(2n) {font-weight:bold;}
li:nth-child(even) {font-weight:bold;}
总之，:nth-last-child()和nth-child()的使用方法是一样的，只不过它们的区别是：:nth-child()是从元素的第一个开始计算，而:nth-last-child()是从元素的最后一个开始计算，它们的计算方法都是一样的。
5. :nth-of-type()
:nth-of-type()类似:nth-child()，不同的是它只计算选择器中指定的那个元素。它适合用于过滤中包含了多种不同类型的子元素。
【示例12】在div#wrap中包含有p、li、img等元素，但现在只需要选择p元素，并让它每隔一个p元素就有不同的样式，可以简单地写成：
div#wrap p:nth-of-type(even) { font-weight:bold;}
其实，这种用法与:nth-child()是一样的，也可以使用:nth-child()来实现，唯一不同的是:nth-of-type()指定了元素的类型。
6. :nth-last-of-type()
:nth-last-of-type()与:nth-last-child()用法相同，但它指定了子元素的类型，除此之外，语法形式和用法基本相同。
7. :first-of-type和:last-of-type
:first-of-type和:last-of-type类似于:first-child和:last-child，不同之处是它们指定了元素的类型。
8. :only-child和:only-of-type
:only-child表示一个元素是它的父元素的唯一一个子元素。
【示例13】在文档中设计HTML结构，代码如下。
如果需要在div.post只有一个p元素的时候，改变这个p元素的样式，可以使用:only-child来实现。例如：
.post p {font-weight:bold;}
.post p:only-child {background: red;}
此时div.post只有一个子元素p时，它的背景色将会显示为红色。
:only-of-type表示一个元素包含很多个子元素，而其中只有一个子元素是唯一的，那么使用这种选择方法就可以选中这个唯一的子元素。例如：
如果只想选择上面结构块中的p元素，可以这样写：
.post p:only-of-type{background-color:red;}
9. :empty
:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，包括空格。
【示例14】下面的示例有3个段落，其中一个段落什么都没有，完全是空的。
如果想设计这个p元素不显示，可以这样来写：
.post p:empty {display: none;}
2.6.2 否定伪类
:not()表示否定选择器，即过滤掉not()匹配的特定元素。
【示例】下面的示例为页面中所有段落文本设置字体大小为24像素，然后使用:not(.author)排出第一段文本，设置其他段落文本的字体大小为14像素，显示效果如图2.22所示。
图2.22 否定伪类的应用
2.6.3 状态伪类
CSS3包含3个UI状态伪类选择器，简单说明如下。
- : enabled：匹配指定范围内所有可用UI元素。
- :disabled：匹配指定范围内所有不可用UI元素。
- :checked：匹配指定范围内所有可用UI元素。
【示例】下面的示例设计了一个简单的登录表单，效果如图2.23所示。在实际应用中，当用户登录完毕，不妨通过脚本把文本框设置为不可用（disabled="disabled"）状态，这时可以通过:disabled选择器让文本框显示为灰色，以告诉用户该文本框不可用了，这样就不用设计“不可用”样式类，并把该类添加到HTML结构中。
图2.23 设计登录表单样式
第1步，新建一个HTML文档，在文档中构建一个简单的登录表单结构，代码如下。
在这个表单结构中，使用HTML的disabled属性分别定义两个不可用的文本框对象。
第2步，内建一个内部样式表，使用属性选择器定义文本框和密码域的基本样式。
第3步，利用属性选择器，分别为文本框和密码域定义内嵌标识图标。
input[type="text"] { background:url(images/name.gif) no-repeat 2px 2px; }
input[type="password"] { background:url(images/password.gif) no-repeat 2px 2px; }
第4步，使用状态伪类选择器，定义不可用表单对象显示为灰色，以提示用户该表单对象不可用。
2.6.4 目标伪类
目标伪类选择器类型形式如E:target，它表示选择匹配E的所有元素，且匹配元素被相关URL指向。该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才有效。
【示例】下面的示例设计了当单击页面中的锚点链接，跳转到指定标题位置时，该标题会自动高亮显示，以提醒用户，当前跳转的位置，效果如图2.24所示。
图2.24 目标伪类样式应用效果