4.5 CSS 3新增的伪类选择器

伪类选择器主要用于对选择器进行限制，对已有选择器匹配到的元素进行过滤。下面将详细介绍其中的一部分。

4.5.1 结构性伪类选择器

结构性伪类选择器是指运用文档结构树来实现元素过滤，简单来说，就是利用文档结构之间的相互关系来匹配制定的元素，用来减少文档内对class属性以及ID属性的定义，从而可以使整个文档更加简练。结构性伪类选择器种类如表4-2所示。

下面使用其中的几个选择器，来介绍它们的用法。

【例4-14】（实例文件：ch04\Chap4.14.html）结构性伪类选择器。

相关的代码实例请参考Chap4.14.html文件，在IE浏览器中运行的结果如图4-18所示。

4.5.2 UI元素状态伪类选择器

UI元素状态伪类选择器就是指定的样式只有当元素处于某种状态时，样式才起作用，在默认状态下不起作用。常见的有:hover、:active、:focus、:enable、:disable、:read-only、:read-write、:checked、:default、:indeterminate、:selection等。

1．:hover、:active、:focus

:hover表示鼠标指针悬浮时的样式，:active表示按下鼠标左键且不松开时的样式，:focus表示鼠标指针获得焦点或者进行输入时的样式。它们编写的顺序不要写反，否则不会显示效果，正确顺序为:hover、:focus、:active。

【例4-15】（实例文件：ch04\Chap4.15.html）:hover、:active、:focus实例。

相关的代码实例请参考Chap4.15.html文件，在IE浏览器中运行的结果如图4-19所示。

2．:checked、:selection

:checked是用来指定当表单中的radio单选按钮、checkbox复选框处于选中状态时的样式。:selection伪类选择器用来指定当元素处于选中状态时的样式。

【例4-16】（实例文件：ch04\Chap4.16.html）:checked、:selection实例。

相关的代码实例请参考Chap4.16.html文件，在IE浏览器中运行的结果如图4-20所示。选中元素时，页面效果如图4-21所示。

4.5.3 目标（:target）伪类选择器

目标伪类选择器:target是CSS 3新增伪类选择器之一，用来匹配文档中被相关URL指向的目标元素。目标伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效。

具体来说，URL中的标志通常会包含一个#，后面带有一个标志符名称，如#box,:target就是匹配ID为"box"的目标元素。

如一个页面中有一个<a>标签，它的href是<a href="#box">内容</a> ，同一个页面中也会有以box为id的元素，<div id="box ">标题</div>。

那么<a>标签的href属性会链接到#box元素，也就是box:target选择符所选的目标元素，当a链接到这个元素的时候，它所指定的样式就是目标元素的样式。

【例4-17】（实例文件：ch04\Chap4.17.html）:target伪类选择器实例。

相关的代码实例请参考Chap4.17.html文件，在IE浏览器中运行的结果如图4-22所示。当点击“第一章的题目是什么”链接时，页面变成如图4-23所示的效果。

4.5.4 否定（:not）伪类选择器

否定伪类选择器用于过滤掉含有某个选择器的元素，如p:not(#box),就是过滤掉id为#box的p元素。

【例4-18】（实例文件：ch04\Chap4.18.html）:not伪类选择器实例。

相关的代码实例请参考Chap4.18.html文件，在IE浏览器中运行的结果如图4-24所示。