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　目标伪类样式应用效果