下载掌阅APP，畅读海量书库
立即打开
伪类是一种特殊的类选择器，它的用处就是可以对不同状态或行为下的元素定义样式，这些状态或行为是无法通过静态的选择器匹配的，具有动态特性。
伪选择器包括伪类选择器和伪对象选择器。伪选择器能够根据元素或对象的特征、状态、行为进行匹配。
伪选择器以冒号（:）作为前缀标识符。冒号前可以添加限定选择符，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格。
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伪选择器众多，下面仅针对CSS3中新增的伪类选择器进行说明，其他选择器请参考CSS3参考手册详细了解。
结构伪类是根据文档结构的相互关系来匹配特定的元素，从而减少文档元素的class属性和ID属性的无序设置，使得文档更加简洁。
结构伪类形式多样，但用法固定，以便设计各种特殊样式效果，结构伪类主要包括下面几种，简单说明如下。
:fist-child：第1个子元素。
:last-child：最后一个子元素。
:nth-child()：按正序匹配特定子元素。
:nth-last-child()：按倒序匹配特定子元素。
:nth-of-type()：在同类型中匹配特定子元素。
:nth-last-of-type()：按倒序在同类型中匹配特定子元素。
:first-of-type：第1个同类型子元素。
:last-of-type：最后一个同类型子元素。
:only-child：唯一子元素。
:only-of-type：同类型的唯一子元素。
:empty：空元素。
【示例1】 设计排行榜栏目列表样式，设计效果如图6.19所示。在列表框中为每个列表项定义相同的背景图像。
图6.19 设计推荐栏目样式
设计的列表结构和样式请参考本节示例源代码。下面结合本示例分析结构伪类选择器的用法。
【示例2】 如果设计第1个列表项前的图标为1，且字体加粗显示，则使用:first-child匹配。
【示例3】 如果单独给最后一个列表项定义样式，就可以使用:last-child来匹配。
#wrap li:last-child {background-position:2px -277px;}
显示效果如图6.20所示。
【示例4】 下面6个样式分别匹配列表中第2~7个列表项，并分别定义它们的背景图像Y轴坐标位置，显示效果如图6.21所示。
:not()表示否定选择器，即过滤掉not()函数匹配的特定元素。
【示例】 为页面中所有段落文本设置字体大小为24px，然后使用:not(.author)排出第1段文本，设置其他段落文本的字体大小为14px，显示效果如图6.22所示。
图6.20 设计最后一个列表项样式
图6.21 设计每个列表项样式
图6.22 否定伪类的应用
CSS3包含3个UI状态伪类选择器，简单说明如下。
:enabled：匹配指定范围内所有可用UI元素。
:disabled：匹配指定范围内所有不可用UI元素。
:checked：匹配指定范围内所有选中UI元素。
【示例】 设计一个简单的登录表单，效果如图6.23所示。在实际应用中，当用户登录完毕，不妨通过脚本把文本框设置为不可用（disabled="disabled"）状态，这时可以通过:disabled选择器让文本框显示为灰色，以告诉用户该文本框不可用了，这样就不用设计“不可用”样式类，并把该类添加到HTML结构中。
图6.23 设计登录表单样式
【操作步骤】
第1步，新建一个文档，在文档中构建一个简单的登录表单结构。在这个表单结构中，使用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步，使用状态伪类选择器定义不可用表单对象显示为灰色，提示用户该表单不可用。
目标伪类选择器类型形式如E:target，它表示选择匹配E的所有元素，且匹配元素被相关URL指向。该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才有效。
【示例】 设计当单击页面中的锚点链接，跳转到指定标题位置时，该标题会自动高亮显示，以提醒用户，当前跳转的位置，效果如图6.24所示。
图6.24 目标伪类样式应用效果
动态伪类是一类行为类样式，只有当用户与页面进行交互时有效，详细示例演示请参考11.1节内容。动态伪类包括两种形式。
锚点伪类，如:link、:visited。
行为伪类，如:hover、:active和:focus。