伪类选择器与前面介绍的伪元素选择器有些相似，伪类选择器主要用于对已有选择器做进一步的限制，对已有选择器能匹配的元素做进一步的过滤。CSS 3.0提供的伪类选择器主要分为如下3类：
➢ 结构性伪类选择器
➢ UI元素状态伪类选择器
➢ 其他伪类选择器
结构性伪类选择器
结构性伪类选择器指的是根据HTML元素之间的结构关键进行筛选的伪类选择器。结构性伪类选择器有如下几个。
➢ Selector:root：匹配文档的根元素。在HTML文档中，根元素永远是
➢ Selector:first-child：匹配符合Selector选择器，而且必须是其父元素的第一个子节点的元素。
➢ Selector:last-child：匹配符合Selector选择器，而且必须是其父元素的最后一个子节点的元素。
➢ Selector:nth-child(n)：匹配符合Selector选择器，而且必须是其父元素的第n个子节点的元素。
➢ Selector:nth-last-child(n)：匹配符合Selector选择器，而且必须是其父元素的倒数第n个子节点的元素。
➢ Selector:only-child：匹配符合Selector选择器，而且必须是其父元素的唯一子节点的元素。
➢ Selector:first-of-type：要求匹配符合Selector选择器，而且是与它同类型、同级的兄弟元素中的第一个元素。
➢ Selector:last-of-type：要求匹配符合Selector选择器，而且是与它同类型、同级的兄弟元素中的最后一个元素。
➢ Selector:nth-of-type(n)：要求匹配符合Selector选择器，而且是与它同类型、同级的兄弟元素中的第n个元素。
➢ Selector:nth-last-of-type(n)：要求匹配符合Selector选择器，而且是与它同类型、同级的兄弟元素中的倒数第n个元素。
➢ Selector:only-of-type：要求匹配符合Selector选择器，而且是与它同类型、同级的兄弟元素中的唯一一个元素。
➢ Selector:empty：匹配符合Selector选择器，而且其内部没有任何子元素（包括文本节点）的元素。
提示
上面这些伪类选择器中，伪类选择器前面的Selector选择器可以省略，如果省略了该选择器，则Selector将不作为匹配条件。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :root伪选择器 </title>
<style type="text/css">
:root {
background-color: #ccc;
}
body {
background-color: #888;
}
</style>
</head>
<body>
疯狂Java讲义<br/>轻量级Java EE企业应用实战<br/>
疯狂Ajax讲义<br/>疯狂XML讲义<br/>
经典Java EE企业应用实战<br/>疯狂Android讲义<br/>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :child </title>
<style type="text/css">
/* 定义对作为其父元素的第一个子节点的li元素起作用的CSS样式 */
li:first-child {
border: 1px solid black;
}
/* 定义对作为其父元素的最后一个子节点的li元素起作用的CSS样式 */
li:last-child {
background-color: #aaa;
}
/* 定义对作为其父元素的第2个子节点的li元素起作用的CSS样式 */
li:nth-child(2){
color: #888;
}
/* 定义对作为其父元素的倒数第2个子节点的li元素起作用的CSS样式 */
li:nth-last-child(2){
font-weight: bold;
}
/* 定义对作为其父元素的唯一的子节点的span元素起作用的CSS样式 */
span:only-child {
font-size: 30pt;
font-family: "隶书";
}
</style>
</head>
<body>
<ol>
<li>www.crazyit.org</li>
<li>www.fkjava.org</li>
<li>www.facejava.org</li>
<li>疯狂Java联盟</li>
<li>疯狂软件教育中心</li>
</ol>
<ul>
<li id="java">疯狂Java讲义</li>
<li id="javaee">轻量级Java EE企业应用实战</li>
<li id="ajax">疯狂Ajax讲义</li>
<li id="xml">疯狂XML讲义</li>
<li id="ejb">经典Java EE企业应用实战</li>
<li><span id="android">疯狂Android讲义</span></li>
</ul>
<span>疯狂Java联盟</span>
</body>
</html>
UI元素状态伪类选择器
UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选。UI元素状态伪类选择器有如下几个。
➢ Selector:link：匹配Selector选择器且未被访问前的元素（通常只能是超链接）。
➢ Selector:visited：匹配Selector选择器且已被访问过的元素（通常只能是超链接）。
➢ Selector:active：匹配Selector选择器且处于被用户激活（在鼠标点击与释放之间的事件）状态的元素。
➢ Selector:hover：匹配Selector选择器且处于鼠标悬停状态的元素。
➢ Selector:focus：匹配Selector选择器且已得到焦点的元素。
➢ Selector:enabled：匹配Selector选择器且当前处于可用状态的元素。
➢ Selector:disabled：匹配Selector选择器且当前处于不可用状态的元素。
➢ Selector:checked：匹配Selector选择器且当前处于选中状态的元素。
➢ Selector:default：匹配Selector选择器且页面打开时处于选中状态（即使当前没有被选中亦可）的元素。
➢ Selector:read-only：匹配Selector选择器且处于只读状态的元素。
➢ Selector:read-write：匹配Selector选择器且处于读写状态的元素。
➢ Selector::selection：匹配Selector选择器的元素中当前被选中的内容。
提示
在上面这些伪类选择器中，伪类选择器前面的Selector选择器可以省略，如果省略了该选择器，则Selector将不作为匹配条件。而且::selection选择器前面有两个冒号，不要搞错了。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> UI元素状态的伪类选择器 </title>
<style type="text/css">
td {
border:1px solid black;
padding:4px;
}
/* 为处于鼠标悬停状态的表格行定义CSS样式 */
tr:hover {
background-color: #aaa;
}
/* 为处于激活状态的input元素定义CSS样式 */
input:active {
background-color: blue;
}
/* 为得到焦点的任意元素定义CSS样式 */
:focus {
text-decoration: underline;
}
/* 为可用的任意元素定义CSS样式 */
:enabled{
font-family: "黑体";
font-weight: bold;
font-size:14pt;
}
/* 为不可用的任意元素定义CSS样式 */
:disabled{
font-family: "隶书";
font-size:14pt;
}
/* 为处于勾选状态的任意元素定义CSS样式 */
:checked {
outline: red solid 5px;
}
/* 为页面打开时处于勾选状态的任意元素定义CSS样式 */
:default {
outline: #bbb solid 5px;
}
</style>
</head>
<body>
<table style="width:400px;border-collapse:collapse">
<tr>
<td>疯狂Java讲义</td><td>109</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td><td>89</td>
</tr>
<tr contentEditable="true">
<td>疯狂Android讲义</td><td>89</td>
</tr>
</table>
<button disabled>不可用的按钮</button>
<input type="text" disabled value="不可用的文本框"/>
<button>可用的按钮</button>
<input type="text" value="可用的文本框"/>
男：<input type="radio" value="male" name="gender"/>
女：<input type="radio" value="female" name="gender"/>
未知：<input type="radio" checked value="unknown" name="gender"/>
</body>
</html>
:not和:target
CSS 3.0还新增了两个特殊的伪类选择器。
➢ Selector:target：匹配符合Selector选择器且必须是命名锚点目标的元素。
➢ Selector1:not(Selector2)：匹配符合Selector1选择器，但不符合Selector2选择器的元素，相当于用Selector1减去Selector2。
:target选择器要求元素必须是命名锚点的目标，而且必须是当前正在访问的目标。:target选择器非常实用：页面可通过该选择器高亮显示正在被访问的目标。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :target </title>
<style type="text/css">
:target{
background-color: #ff0;
}
</style>
</head>
<body>
<p id="menu">
<a href="#java">疯狂Java讲义</a> |
<a href="#ee">轻量级Java EE企业应用实战</a> |
<a href="#android">疯狂Android讲义</a> |
<a href="#ejb">经典Java EE企业应用实战</a>
</p>
<div id="java">
<h2>疯狂Java讲义</h2>
<p>本书详细介绍了Java语言各方面的内容。</p>
</div>
<div id="ee">
<h2>轻量级Java EE企业应用实战</h2>
<p>本书详细介绍Struts 2、Spring 3、Hibernate三个框架整合开发的知识</p>
</div>
<div id="android">
<h2>疯狂Android讲义</h2>
<p>本书详细介绍了Android应用开发的知识。</p>
</div>
<div id="ejb">
<h2>经典Java EE企业应用实战</h2>
<p>本书详细介绍JSF 、EJB 3、JPA等Java EE相关的知识</p>
</div>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。