详解CSS3中的选择器（三）伪类选择器
今天我为大家讲解下伪类选择器，这种选择器也是比较难以掌握的一种选择器。
什么是伪类选择器呢
做过Web网页开发的童鞋都经常看到css样式中有这么一种类型p:first-child { ... }，像这种带有冒号（:）标志的都是伪类选择器，有的童鞋会说了，伪元素也是冒号啊，比如 div:before {...}。诚然，为了兼容CSS3之前的版本，伪元素是允许使用单冒号的，但还是提倡使用双冒号（::）。
伪类选择器也是最复杂的一种选择器，共有六大子类型：
- 动态伪类选择器
- 目标伪类选择器
- 语言伪类选择器
- UI状态伪类选择器
- 结构伪类选择器
- 否定伪类选择器
下面我们开始一个一个讲解。
动态伪类选择器
顾名思义，动态伪类选择器是一种用户和网站交互才能体现出来的选择器。它包括两种，一种是在链接元素a中经常看到的锚点选择器，一种是用户行为选择器。
E:link-表示链接未被访问时设置的CSS样式，属于锚点伪类。E:visited-表示链接已被用户访问过设置的CSS样式，属于锚点伪类。E:active-元素被点击时所设置的CSS样式，属于用户行为伪类。E:hover-鼠标停留在元素上方时所设置的CSS样式，属于用于行为伪类。E:focus-元素获取焦点时所设置的CSS样式，属于用户行为伪类。
我们来看下面一段代码：
<!DOCTYPE html>
<html>
<head>
<title>动态伪类选择器的应用</title>
<meta charsert="utf-8">
<style type="text/css">
.downlaod-info { text-align: center;}
.btn { // 普通样式
background-color: #0074cc;
background-image: linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x;
display: inline-block;
border: 1px solid #cccccc;
}
.btn: hover { // 鼠标悬浮状态时的样式
background-color:#0055cc;
text-docoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
transition: background-position: 0.1s linear;
}
.btn: active { // 鼠标点击时的样式
background-color: #0055cc;
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
.btn: focus { // 获取焦点时的样式
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
</style>
</head>
<body>
<div class="download-info">
<a href="#" class="btn">View project on GitHub</a>
</div>
</body>
</html>
在Web开发中使用动态伪类选择器时，我们通常遵守一个"爱恨原则"，也就是"link-hover-visited-active"，简写为Love。
目标伪类选择器
目标伪类选择器只有一个":target"标识。在许多的URL中，我们在URL的最后会看到带有"#"的片段，这其实也是锚点。在页面中，也经常在a元素中看到 href="#flag" 类似的属性。这些都给使用锚点选择器做了准备工作。下面我们通过一个"手风琴"的例子理解下目标伪类的妙用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直手风琴</title>
<style>
* {margin:0;padding:0;}
.listbox {
width: 500px;
height: 400px;
margin: 50px auto;
}
.list {
position: relative;
}
.list a {
display: block;
height: 35px;
background: linear-gradient(#eeeeee, #8f8f8f);
text-decoration: none;
padding-left: 12px;
border-radius: 5px;
color:#424242;
line-height: 35px;
}
.list p {
overflow: hidden;
height: 0px;
padding-left: 10px;
margin: 5px auto;
transition: 0.7s linear;
}
.list span {
width: 0;
height: 0;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-top: 5px solid white;
border-bottom: 5px solid rgba(0, 0, 0, 0);
position: absolute;
top: 15px;
right: 15px;
}
.list:target p {
height: 100px;
}
.list:target a {
background:linear-gradient(#6bb2ff, #2288dd);
color:white;
}
.list:target span {
border-top: 5px solid transparent;
border-left: 5px solid #fff;
right: 10px;
}
</style>
</head>
<body>
<div class="listbox">
<div class="list" id="listOne">
<a href="#listOne">小狗</a>
<span></span>
<p>123456789</p>
</div>
<div class="list" id="listTwo">
<a href="#listTwo">小猫</a>
<span></span>
<p>abcdefghijk</p>
</div>
<div class="list" id="listThree">
<a href="#listThree">小牛</a>
<span></span>
<p>@%$%$^^^&&^^%%%%</p>
</div>
</div>
</body>
</html>
在这段代码中，有三个片段，三个a标签中都设置了锚点。我们在点击了某个a标记时，对应的url中就出现了带有 #的锚点。此时，相应的div就会在0.7s内缓缓地向下展开100px，类似手风琴的效果。在style中，我们使用了三个 :target 目标伪类选择器，就是将在url中出现锚点时才会显示相应的效果。
当然目标伪类选择器还有很多其它的妙用，wiki中就用到目标伪类选择器来作为下标解说的链接。
语言伪类选择
使用语言伪类选择器来匹配语言的元素是非常有用的，特别是用于多语言版本的网站，其作用更是明显。为文档指定语言，可以通过如下两种方式：
我们先来看下面两段代码：
<!DOCTYPE>
<html lang="en-US"> // 指定使用的语言为en-US
<head>
<meta charset="UTF-8">
<title>语言伪类选择器运用</title>
</head>
<body>
<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q>we hope they succeed.</p>
</body>
</html>
<!DOCTYPE>
<html lang="fr"> // 指定使用的语言为en-US
<head>
<meta charset="UTF-8">
<title>语言伪类选择器运用</title>
</head>
<body>
<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q>we hope they succeed.</p>
</body>
</html>
第一段代码，使用了美式英语作为网页的语言。第二段代码，使用了法语作为网页的语言。此时，我们就可以使用语言伪类选择器对它们做不同样式的设置。
英语版本：
:lang (en) {
quotes: '"' '"';
}
:lang (en) a { background: red; }
法语版本：
:lang (fr) {
quotes: '<<" '>>';
}
:lang (fr) q {background: green;}
UI状态伪类选择器
UI元素状态一般包括：启用、禁用、选中、获取焦点、失去焦点、锁定和待机等等。CSS中的UI状态伪类选择器有以下三个：
- E:checked-表示选中状态。
- E:enabled-表示启用状态。
- E:disabled-表示禁用状态。
一般使用button标记时会用到 :disabled 这个UI状态伪类选择器。用于屏蔽按钮的点击事件。:checked通常是设置单选框和复选框选中时的样式。
结构伪类选择器
结构伪类选择器在整个选择器中也是颇具份量的选择器。要想成为一个CSS高手，这是避不开的必修课。
结构伪类选择器和之前说过的层次选择器在概念上有一些相似，都是基于DOM树，基于父子关系等。我们详细列举下结构伪类选择器的种类：
- E:first-child-选择E元素的父元素的第一个子元素。
- E:last-child-选择E元素的父元素的最后一个子元素。
- E:root-选择文档的根元素，也就是html元素。
- E:nth-child(n)-选择E元素的父元素的第n个子元素，n可以是正整数、计算式或者关键字。
- E:nth-last-child(n)-选择E元素的父元素的倒数第n个子元素，n可以是正整数、计算式或者关键字。
- E:first-of-type-选择E元素的父元素下第一个E元素。
- E:last-of-type-选择E元素的父元素下最后一个E元素。
- E:nth-of-type(n)-选择E元素的父元素下第n个E元素。
- E:nth-last-of-type(n)-选择E元素的父元素下倒数第n个E元素。
- E:only-child-选择父元素只包含一个子元素，且该子元素匹配E元素。
- E:only-of-type-选择父元素只包含一个同类型的子元素，且该子元素匹配E元素。
- E:empty-选择没有子元素的元素，而且该元素也不包含任何文本节点。
这里有个比较难以理解的点-n代表什么
在上面十二个选择器中，有四个都带有参数n：
- :nth-child(n)
- :nth-last-child(n)
- :nth-of-type(n)
- :nth-last-of-type(n)
实际应用中，n可以是整数（1、2、3）、计算式（2n、2n+1）、关键字（even、odd）。但是n最终的结果必须是大于等于1的整数。比如：2n-1，n可以是从0开始的整数 0、1、2…，相应的2n-1的值就为-1、1、3、… 但这里只有计算得到的结果值大于1的才能起作用。所以2n-1中1、3、5…，也就是奇数元素被选中。常用有以下几种：
- nth-child(3)-参数n是一个具体数值，表示选择某个元素下的di3个子元素。
- nth-child(n)-表示选中元素所有的子元素，这里n是从0开始的整数。
- nth-child(2n)-表示选中的是偶元素。
- nth-child(2n+1)-表示选中的是奇元素。
- nth-child(n+5)-表示选中的是下标从5开始的子元素。
- nth-child(-n+5)-表示选中的是下标为小于等于5的元素。
- nth-child(4n+1)-表示选中的是下标为4倍数且加1的元素。
有童鞋会问了 nth-of-type(n) 有什么作用呢？
当我们在HTML中设置元素的时候是同种类型的时候，比如下拉列表是这个样子的时候：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
....
<li>20</li>
</ul>
ul > li:nth-child(3) { background-color: red; } 和ul > li: nth-of-type { background-color: red; } 效果是等价的。但如果是这个样子的呢？
<ul>
<li>1</li>
<p>2</p>
<p>3</p>
<li>4</li>
<li>5</li>
....
<li>20</li>
</ul>
上面的两个样式还是等价的吗？
答案显然不是，为什么呢？此时ul下的第三个元素已经变成了p元素，如果使用了ul>li:nth-child(3) 这种模式，此时这个p元素的背景色就变成了红色。如果使用了ul>li:nth-of-type(3) 这种模式，此时第3个li元素，也就是ul下第5个元素的背景色就变成了红色。
:first-child/:last-child和:first-of-type/:last-of-type也是同理。
否定伪类选择器
否定伪类选择器":not()"主要用于定位不匹配该选择器的元素。它是非常有用的选择器，可以起到过滤内容的作用。比如: input:not([type=submit])。
比如我们在网页中看到的抽奖游戏，大转盘之类的，就可以使用否定选择器来轻松地设置样式。
今天就介绍到这。