HTML 5与CSS 3权威指南（第4版·下册）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

16.3　结构性伪类选择器

本节介绍CSS 3中的结构性伪类选择器。在介绍结构性伪类选择器之前，先来介绍一下CSS中的伪类选择器及伪元素。

16.3.1　CSS中的伪类选择器及伪元素

1.伪类选择器概述

我们知道，在CSS中，可以使用类选择器把相同的元素定义成不同的样式，如针对一个p元素，我们可以做如下所示定义。

p.right{text-align:right}
p.center{text-align:right}

然后在页面上对p元素使用class属性，把定义好的样式指定给具体的p元素，代码如下所示。

<p class="right">测试文字</p>
<p class="center">测试文字</p>

在CSS中，除了上面所述的类选择器之外，还有一种伪类选择器，这种伪类选择器与类选择器的区别是，类选择器可以随便起名，如上面的“p.right”与“p.center”，你也可以命名为“p.class1”与“p.class2”，然后在页面上使用“class='class1'”与“class='class2'”，但是伪类选择器是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}
2.伪元素选择器概述

伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，它的使用方法如下所示。

选择器：伪元素{属性：值}

伪元素选择器也可以与类配合使用，使用方法如下所示。

选择器.类名：伪元素{属性：值}

在CSS中，主要有如下四个伪元素选择器。

（1）first-line伪元素选择器

first-line伪元素选择器用于向某个元素中的第一行文字使用样式。

代码清单16-4是它的一个使用示例，在该示例中，有一个p元素，在该元素内存在两行文字，使用first-line伪元素选择器将第一行文字设为蓝色。

代码清单16-4　first-line伪元素使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>first-line伪元素使用示例</title>
<style type="text/css">
p:first-line{color:#0000FF}  
</style>
</head>
<body>
<p>段落中的第一行。<br>段落中的第二行</p>
</body>
</html>

这段代码的运行结果如图16-6所示。

（2）first-letter伪元素选择器

first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。

代码清单16-5是first-letter伪元素选择器的一个使用示例，在该示例中，有两段文字——一段是英文，另一段是中文，使用first-letter伪元素选择器来设置这两段文字的开头字母或文字的颜色为蓝色。

代码清单16-5　first-letter伪元素选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>first-letter伪元素使用示例</title>
<style type="text/css">
p:first-letter{color:#0000FF}  
</style>
</head>
<body>
<p>This is an english text。</p>
<p>这是一段中文文字。</p>
</body>
</html>

这段代码的运行结果如图16-7所示。

图16-6　first-line伪元素使用示例

图16-7　first-letter伪元素使用示例

（3）before伪元素选择器

before伪元素选择器用于在某个元素之前插入一些内容，使用方法如下所示。

// 可以插入一段文字
<元素〉：before
{
    content：插入文字
}
// 也可以插入其他内容
<元素〉：before
{
    content：url(test.wav)
}

代码清单16-6是before伪元素选择器的一个使用示例，在该示例中有一个ul列表，该列表中有几个li列表项目，使用before伪元素选择器在每个列表项目的文字的开头插入“·”字符。

代码清单16-6　before伪元素选择器的使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>before伪元素选择器使用示例</title>
<style type="text/css">
li:before{content: ·}
</style>
</head>
<body>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</li>
</ul>
</body>
</html>

这段代码的运行结果如图16-8所示。

（4）after伪元素选择器

after伪元素选择器用于在某个元素之后插入一些内容，使用方法如下所示。

<元素>：after
{
    content：插入文字
}
// 也可以插入其他内容
<元素>：after
{
    content：url(test.wav)
}

代码清单16-7是after伪元素选择器的一个使用示例，在该示例中有一个ul列表，这个ul列表的内容为某个网站上播放电影的节目清单。该列表中有几个列表项目，每个列表项目中存放了对于某部电影的超链接，使用after伪元素选择器在每个超链接的后面加入“（仅用于测试，请勿用于商业用途。）”的文字，并且将文字颜色设为红色。

代码清单16-7　after伪元素选择器的使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>after伪元素选择器使用示例</title>
<style type="text/css">
li:after{
    content: "(仅用于测试，请勿用于商业用途。)";
    font-size:12px;
    color:red;
}
</style>
</head>
<body>
<h1>电影清单</h1>
<ul>
<li><a href="movie1.mp4">狄仁杰之通天帝国</a></li>
<li><a href="movie2.mp4">精武风云</a></li>
<li><a href="movie3.mp4">大笑江湖</a></li>
</ul>
</body>
</html>

这段代码的运行结果如图16-9所示。

图16-8　before伪元素使用示例

图16-9　after伪元素选择器使用示例

16.3.2　选择器root、not、empty和target

在介绍完了CSS中的伪类选择器与伪元素选择器之后，让我们来看一下CSS 3中的结构性伪类选择器。结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。

首先，我们来看4个最基本的结构性伪类选择器——root选择器、not选择器、empty选择器与target选择器。

1.root选择器

root选择器将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的“<html>”部分。

代码清单16-8为一个HTML页面，在该页面中，有一段文章，并且有一个文章的标题。

代码清单16-8　root选择器示例的HTML界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html;charset=gb2312" />
<title>root选择器</title>
</head>
<body>
<h1>选择器概述</h1>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;选择器是CSS3中一个重要的内容。首先需要说明的是，使用选择
器的目的是为了提高开发人员书写或修改样式表时的工作效率，因为在样式表中，一般会书写大量
的代码，在大型网站中，样式表中的代码可能会达到几千行。
</p>
</body>
</html>

针对这个网页，使用如下所示的root选择器来指定整个网页的背景色为黄色，将网页中body元素的背景色设为绿色。

<style type="text/css">
:root{
    background-color: yellow;
}
body{
    background-color: limegreen;
}
</style>

使用了root选择器后的运行结果如图16-10所示。

图16-10　root选择器使用示例

另外，在使用样式指定root元素与body元素的背景时，根据不同的指定条件背景色的显示范围会有所变化，这一点请注意。如同样是上面这个示例，如果采取如下所示的样式，不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面就全部变成绿色的了。

<style type="text/css">
body{
    background-color: limegreen;
}
</style>

删除root选择器后的页面如图16-11所示。

图16-11　删除root选择器后的显示效果

2.not选择器

如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。

譬如针对代码清单16-8所示的HTML页面，我们可以使用“body*”语句来指定body元素的背景色为黄色，但是使用“：not（h1）”语句中使用的not选择器排除h1元素，代码如下所示。

<style type="text/css">
body *:not(h1){
    background-color: yellow;
}
</style>

使用not选择器后的运行结果如图16-12所示。

3.empty选择器

使用empty选择器来指定当元素中内容为空白时使用的样式。例如，在代码清单16-9所示的HTML页面中，有一个表格。可以使用empty选择器来指定当表格中某个单元格内容为空白时，该单元格背景为黄色。

代码清单16-9　empty选择器使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>empty选择器</title>
<style type="text/css">
:empty{
    background-color: yellow;
}
</style>
</head>
<body>
<table border="1" cellpading="0" cellspacing="0">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td></td></tr>
</table>
</body>
</html>

使用empty选择器后的运行结果如图16-13所示。

图16-12　使用not选择器示例

图16-13　使用empty选择器示例

4.target选择器

使用target选择器来对页面中某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

接下来我们来看一个target选择器的使用示例。页面中包含几个div元素，每个div元素都存在一个书签，当用户点击了页面中的超链接跳转到该div元素时，该div元素使用target选择器中指定的样式，在target选择器中，指定该div元素的背景色变为黄色。其中指定target选择器时的代码如下所示。

target{
    background-color: yellow;
}

该示例的详细代码如代码清单16-10所示。

代码清单16-10　target选择器使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>target选择器</title>
<style type="text/css">
:target{
    background-color: yellow;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">示例文字1</a> | 
<a href="#text2">示例文字2</a> | 
<a href="#text3">示例文字3</a> | 
<a href="#text4">示例文字4</a> | 
<a href="#text5">示例文字5</a> 
</p>
<div id="text1">
<h2>示例文字1</h2>
<p>...此处略去</p>
</div>
<div id="text2">
<h2>示例文字2</h2>
<p>...此处略去</p>
</div>
<div id="text3">
<h2>示例文字3</h2>
<p>...此处略去</p>
</div>
<div id="text4">
<h2>示例文字4</h2>
<p>...此处略去</p>
</div>
<div id="text5">
<h2>示例文字5</h2>
<p>...此处略去</p>
</body>
</html>

使用target选择器后的运行结果如图16-14所示。

图16-14　使用target选择器示例

16.3.3　选择器first-child、last-child、nth-child和nth-last-child

本节介绍first-child选择器、last-child选择器、nth-child选择器与nth-last-child选择器。利用这几个选择器，能够特别针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。

1.单独指定第一个子元素、最后一个子元素的样式

接下来，让我们看一个示例。该示例对ul列表中的li列表项目进行样式的指定，在样式中对第一个列表项目与最后一个列表项目分别指定不同的背景色。

如果要对第一个列表项目与最后一个列表项目分别指定不同的背景色，目前为止采取的做法都是：分别给这两个列表项目加上class属性，然后对这两个class使用不同的样式，在两个样式中分别指定不同的背景色。但是，如果使用first-child选择器与last-child选择器，这个多余的class属性就不需要了。

接下来，我们在代码清单16-11中看一下如何使用first-child选择器与last-child选择器将第一个列表项目的背景色指定为黄色，将最后一个列表项目的背景色设定为浅蓝色。

代码清单16-11　first-child选择器与last-child选择器使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<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>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>

这段代码的运行结果如图16-15所示。

图16-15　first-child选择器与last-child选择器使用示例

另外，如果页面中具有多个ul列表，则该first-child选择器与last-child选择器对所有ul列表都适用，如代码清单16-12所示。

代码清单16-12　具有多个列表时first-child选择器与last-child选择器使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<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>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
<h2>列表B</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>

这段代码的运行结果如图16-16所示。

另外，first-child选择器在CSS 2中就已存在，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，从IE 7开始被IE浏览器所支持。

last-child选择器从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止还没有获得IE浏览器的支持。

图16-16　具有多个列表时first-child选择器与last-child选择器使用示例

2.对指定序号的子元素使用样式

如果使用nth-child选择器与nth-last-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定样式。这两个选择器是first-child及last-child的扩展选择器。这两个选择器的样式指定方法如下所示。

nth-child(n){
// 指定样式
}
<子元素>：nth-last-child(n){
// 指定样式
}

将指定序号书写在“nth-child”或“nth-last-child”后面的括号中，如“nth-child（3）”表示第三个子元素，“nth-last-child（3）”表示倒数第三个子元素。

在代码清单16-13中，我们给出一个使用这两个选择器的示例，在该示例中，指定ul列表中第二个li列表项目的背景色为黄色，倒数第二个列表项目的背景色为浅蓝色。

代码清单16-13　nth-child选择器与nth-last-child选择器使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<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>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>

这段代码的运行结果如图16-17所示。

图16-17　nth-child选择器与nth-lastchild选择器使用示例

另外，这两个选择器都是从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止还没有受到IE浏览器的支持。

3.对所有第奇数个子元素或第偶数个子元素使用样式

除了对指定序号的子元素使用样式以外，nth-child选择器与nth-last-child选择器还可以用来对某个父元素中所有第奇数个子元素或第偶数个子元素使用样式。使用方法如下所示。

nth-child(odd){
// 指定样式
}
// 所有正数下来的第偶数个子元素
<子元素>:nth-child(even){
// 指定样式
}
// 所有倒数上去的第奇数个子元素
<子元素>:nth-last-child(odd){
// 指定样式
}
// 所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(even){
// 指定样式
}

接下来，我们在代码清单16-14中看一个使用nth-child选择器来分别针对ul列表的第奇数个列表项目与第偶数个列表项目指定不同背景色的示例。在该示例中将所有第奇数个列表项目的背景色设为黄色，将所有第偶数个列表项目的背景色设为浅蓝色。

代码清单16-14　使用nth-child对第奇数个、第偶数个子元素使用不同样式示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>使用nth-child对第奇数个、第偶数个子元素使用不同样式示例</title>
<style type="text/css">
li:nth-child(odd){
    background-color: yellow;
}
li:nth-child(even){
    background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>

这段代码的运行结果如图16-18所示。

图16-18　使用nth-child对第奇数个、第偶数个子元素使用不同样式示例

另外，使用nth-child选择器与nth-last-child选择器时，虽然在对列表项目使用时没有问题，但是当用于其他元素时，还是会出现问题，在16.3.4节中，我们将阐述会产生哪些问题，以及怎么解决这些问题。

16.3.4　选择器nth-of-type和nth-last-of-type

1.使用选择器nth-child和nth-last-child时会产生的问题

之前，我们介绍过将nth-child选择器与nth-last-child选择器用于某些元素时，会产生一些问题，这里我们首先来看一下究竟会产生什么问题。

在代码清单16-15中，我们给出一个HTML页面代码，在该页面中，存在一个div元素，在该div元素中，又给出几篇文章的标题与每篇文章的正文。

代码清单16-15　nth-of-type选择器与nth-last-of-type选择器使用示例的HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>nth-of-type选择器与nth-last-of-type选择器使用示例</title>
</head>
<body>
<div>
<h2>文章标题A</h2>
<p>文章正文。</p>
<h2>文章标题B</h2>
<p>文章正文。</p>
<h2>文章标题C</h2>
<p>文章正文。</p>
<h2>文章标题D</h2>
<p>文章正文。</p>
</div>
</body>
</html>

为了让第奇数篇文章的标题与第偶数篇文章的标题的背景色不一样，我们首先使用nth-child选择器来进行指定，指定第奇数篇文章的标题背景色为黄色，第偶数篇文章的标题背景色为浅蓝色，书写方法如下所示。

<style type="text/css">
h2:nth-child(odd){
    background-color: yellow;
}
h2:nth-child(even){
    background-color: skyblue;
}
</style>

将上面这段指定样式的代码添加到如代码清单16-15所示的HTML页面中，然后在浏览器中查看该页面的运行结果，如图16-19所示。

运行结果并没有如预期的那样，让第奇数篇文章的标题背景色为黄色，第偶数篇文章的标题背景色为浅蓝色，而是所有文章的标题都变成了黄色。

这个问题的产生原因在于：nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素时，是连同父元素中的所有子元素一起计算的。

换句话说，“h2：nth-child（odd）”这行代码的含义，并不是指“针对div元素中第奇数个h2子元素来使用”，而是指“当div元素中的第奇数个子元素如果是h2子元素时使用”。

所以在上面这个示例中，因为h2元素与p元素相互交错，所有h2元素都处于奇数位置，所以所有h2元素的背景色都变成了黄色，而处于偶数位置的p元素，因为没有指定第偶数个位置的子元素的背景色，所以没有发生变化。

当父元素是列表时，因为列表中只可能有列表项目一种子元素，所以不会有问题，而当父元素是div时，因为div元素中包含多种子元素，所以出现了问题。

2.使用选择器nth-of-type和nth-last-of-type

在CSS 3中，使用nth-of-type选择器与nth-last-of-type选择器来避免这类问题的发生。使用这两个选择器时，CSS 3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算了。这两个选择器的使用方法如下所示。

<style type="text/css">
h2:nth-of-type(odd){
    background-color: yellow;
}
h2:nth-of-type(even){
    background-color: skyblue;
}
</style>

把以上这段代码添加到代码清单16-15所示页面中，然后运行该页面，运行结果如图16-20所示。

图16-19　在代码清单16-15所示的HTML页面中使用nth-child选择器

图16-20　nth-of-type选择器使用示例

另外，如果计算是奇数还是偶数时需要从下往上倒过来计算，则可以使用nth-last-of-type选择器来代替nth-last-child选择器，进行倒序计算。

nth-of-type选择器与nth-last-of-type选择器都是从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止，还没有获得IE浏览器的支持。

16.3.5　循环使用样式

通过前几节的介绍，我们已经知道，使用nth-child选择器、nth-last-child选择器、nth-of-type选择器与nth-last-of-type选择器，我们可以对父元素中指定序号的子元素、第奇数个子元素、第偶数个子元素来单独进行样式的指定，这里我们再通过代码清单16-16所示示例，复习一下nth-child选择器的用法。在该示例中，有一个ul列表，通过nth-child选择器来指定该列表中第一个列表项目、第二个列表项目、第三个列表项目及第四个列表项目的背景色。

代码清单16-16　使用nth-child选择器指定项目背景色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>使用nth-child选择器指定项目背景色</title>
<style type="text/css">
li:nth-child(1) {
   background-color: yellow;
}
li:nth-child(2) {
   background-color: limegreen;
}
li:nth-child(3) {
   background-color: red;
}
li:nth-child(4) {
   background-color: white;
}
</style>
</head>
<body>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
<li>列表项目7</li>
<li>列表项目8</li>
<li>列表项目9</li>
<li>列表项目10</li>
<li>列表项目11</li>
<li>列表项目12</li>
</ul>
</body>
</html>

这段代码的运行结果如图16-21所示。

在图中，我们可以看见该列表中前四个列表项目的背景色已设定好，其他列表项目的背景色均未设定。现在，要讨论一个问题，如果开发者想对所有的列表项目都设定背景色，但是不采用这种一个个列表项目分别指定的方式（如果有100个列表项目的话，工作量就太大了），而是采用循环指定的方式，让剩下来的列表项目循环采用一开始已经指定好的背景色，应该怎么处理呢？

这时，仍然可以采用nth-child选择器，只需在“nth-child（n）”语句处，把参数n改成可循环的an+b的形式就可以了。a表示每次循环中共包括几种样式，b表示指定的样式在循环中所处位置。如此处是4种背景色作为一组循环，则将代码清单16-16中样式指定的代码修改成如下所示的指定方法。

<style type="text/css">
li:nth-child(4n+1) {
    background-color: yellow;
}
li:nth-child(4n+2) {
    background-color: limegreen;
}
li:nth-child(4n+3) {
    background-color: red;
}
li:nth-child(4n+4) {
    background-color: white;
}
</style>

用这段代码替代代码清单16-16中样式指定的代码，然后运行代码清单16-16，运行结果如图16-22所示。

图16-21　使用nth-child选择器指定项目背景色

图16-22　循环使用样式示例

在运行结果中，我们可以清楚地看到，所有列表项目均循环使用了开头四个列表项目中的背景色。

另外，“4n+4”的写法可略写成“4n”的形式。

因此，前面我们所说的nth-child（odd）选择器和nth-child（even）选择器实际上都可以采用如下形式进行代替。

// 所有正数下来的第奇数个子元素
<子元素>:nth-child(2n+1){
// 指定样式
}
// 所有正数下来的第偶数个子元素
<子元素>:nth-child(2n+2){
// 指定样式
}
// 所有倒数上去的第奇数个子元素
<子元素>:nth-last-child(2n+1){
// 指定样式
}
// 所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(2n+2){
// 指定样式
}

16.3.6　only-child选择器

采用如下所示的方法并结合运用nth-child选择器与nth-last-child选择器，则可指定当某个父元素中只有一个子元素时才使用的样式。

<子元素>:nth-child(1)：nth-last-child(1){
    // 指定样式
}

接下来，我们看一个示例，该示例中有两个ul列表，一个ul列表里有几个列表项目，另一个ul列表里只有一个列表项目。在样式中指定li列表的背景色为黄色，但是由于采用了结合运用nth-child选择器与nth-last-child选择器并且将序号都设定为1的处理，所以显示出来的页面中只有拥有唯一列表项目的那个ul列表中的列表项目背景色变为黄色。代码如代码清单16-17所示。

代码清单16-17　只对唯一列表项目使用样式示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>只对唯一列表项目使用样式示例</title>
<style type="text/css">
li:nth-child(1):nth-last-child(1){
    background-color: yellow;
}
</style>
</head>
<body>
<h2>ul列表A</h2>
<ul>
<li>列表项目A01</li>
</ul>
<h2>ul列表B</h2>
<ul>
<li>列表项目B01</li>
<li>列表项目B02</li>
<li>列表项目B03</li>
</ul>
</body>
</html>

这段代码的运行结果如图16-23所示。

图16-23　只对唯一列表项目使用样式示例

另外，可以使用only-child选择器来代替使用“nth-child（1）：nth-last-child（1）”的实现方法。如在上面这个示例中，可以将样式指定中的代码改成如下所示的指定方法。

<style type="text/css">
li:only-child{
    background-color: yellow;
}
</style>

读者可自行将上面示例中的样式指定代码用这段代码进行替代，然后在浏览器中重新查看运行结果。另外，也可使用only-of-type选择器来替代“nth-of-type（1）：nth-last-of-type（1）”，通过结合使用nth-of-type选择器与nth-last-of-type选择器来让样式只对唯一子元素起作用。nth-of-type选择器与nth-last-of-type选择器的作用与使用方法在前文已经介绍，此处不再赘述。

上一章目录下一章