CSS3 选择器【一】
日期：2014-05-17 浏览次数：21088 次
选择器概述
选择器是CSS3中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。在CSS3中，提倡使用选择器来将样式与元素直接 绑定真情为，这样，在样式表中什么样式与什么元素相匹配变得一目了然，修改起来也方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大 量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。
CSS3中的属性选择器
- [attr=val]属性选择器的含义是：如果元素用attr表示的属性之属性值为val指定的字符，则该元素使用这个样式。
- [attr*=val]属性选择器的含义是：如果元素用attr表示的属性之属性值包含val指定的字符，则该元素使用这个样式。
- [attr^=val]属性选择器的含义是：如果元素用attr表示的属性之属性值以val指定的字符开始，则该元素使用这个样式。
- [attr$=val]属性选择器的含义是：如果元素用attr表示的属性之属性值以val指定的字符结尾，则该元素使用这个样式。
结构性伪类选择器
CSS中的伪类选择器
伪类选择器与类选择器的区别是，类选择器可以随便起名，但是伪类选择器是CSS中已经定义好的选择器，不能随便起名。在CSS中最常用的伪类选择器是使用在a（锚）元素上的几种选择器，使用方法如下所示：
a:link {color:#FF0000; text-decoration:none;}
a:visited {color:#00FF00; text-decoration:none;}
a:hover {color:#FF00FF; text-decoration:underline;}
a:active {color:#0000FF; text-decoration:underline;}
CSS中的伪元素选择器
所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器。在CSS中主要有如下四类伪元素选择器：
- first-line伪元素选择器：用于为某个元素中的第一行文字使用样式；
- first-letter伪元素选择器：用于为某个元素中的文字的首字母（欧美文字）或第一个字使用样式；
- before伪元素选择器：用于在某个元素之前插入一些内容；
- after伪元素选择器：用于在某个元素之后插入一些内容。
结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。
选择器root、not、empty和target
root选择器将样式绑定到页面的根元素。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面 的<html>部分。另外，在使用样式指定root元素与body元素的背景时，根据不同的指定条件，背景色的显示范围会有所变化，这一点请 注意。
如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。例如：我们可以使用“body *”来指定body元素的背景色为黄色，但是排除h1元素使用这个背景色，则CSS样式定义如下：
<style type="text/css">
:root {background-color:yellow;}
body *:not(h1) {background-color:yellow;}
:empty {background-color:red;}
:target {background-color:green;}
</style>
使用empty选择器来指定当元素内容为空白时使用的样式。
使用target选择器来对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
选择器first-child、last-child、nth-child和nth-last-child
这几个选择器能够特殊针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素、偶数个或奇数个子元素进行样式的指定。
单独指定第一个子元素、最后一个子元素的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>first-child与last-child选择器示例</title>
<style type="text/css">
li:first-child {background-color: yellow;}
li:last-child {background-color: skyblue;}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
</body>
</html>
对指定序号的子元素使用样式
使用nth-child选择器和nth-last-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定样式，其使用方法如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>nth-child与nth-last-child选择器示例</title>
<style type="text/css">
li:nth-child(2) {background-color: yellow;}
li:nth-last-child(2) {background-color: skyblue;}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
</body>
</html>
该示例中，指定ul列表中第二个li列表项的背景色为黄色，倒数第二个li列表项的背景色为浅蓝色。
对所有奇数或偶数个元素使用样式
这两个选择器还可以用来对某个父元素中所有奇数（odd）或偶数（even）个子元素使用样式，使用方式如下所示：
<style type="text/css">
li:nth-child(odd) {background-color: yellow;}
li:nth-child(even) {background-color: skyblue;}
</style>
注意：nth-child和nth-last-child选择器是针对父元素中所有子元素的排列来计算序号的 ，即有可能父元素中包含不止一种类型的子元素时，而你要对某一类子元素进行奇偶数元素进行样式指定时不能使用该选择器，应该使用下面两种选择。
选择器nth-of-type和nth-last-of-type
在CSS3中，可以使用这两个选择器来解决上述注意事项中所说明的问题。使用这两个选择器时，CSS3在计算子元素是排号为奇数或偶数时，就只针对同类型的子元素进行计算了，使用方法如下所示：
<style type="text/css">
h2:nth-of-type(odd) {background-color: yellow;}
