IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2

4  结构性伪类选择器

在学习结构性伪类选择器之前，先了解两个概念：伪类选择器和伪元素选择器。伪类选择器是CSS中已经定义好的选择器，不能随便命名。常用的伪类选择器是使用在a元素上的几种，如a:link、a:visited、a:hover、a:active。而伪元素选择器并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，CSS中有4种伪元素选择器，即first-line、first-letter、before、after。例如，p:first-line{color:#ff0000;}，li:after{content: url(dot.png)}。而在CSS3中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式，以下分类进行介绍，如表1～表6所示。

表1  4个最基本的结构性伪类选择器root、not、empty和target

表2 选择器first-child、last-child、nth-child、nth-last-child

表3  选择器nth-of-type、nth-last-of-type

表4  循环使用样式

表5  选择器only-child、only-of-type

表6  CSS3中与用户界面有关的伪类选择器

5、nth-child与nth-of-type的区别：

:nth-child和:nth-of-type都是CSS3中的结构性伪类选择器，其作用近似却又不完全一样，对于不熟悉的人对其可能不是很容易区分。下面就将介绍两者的不同，以便于大家正确灵活使用这两类选择器。

先看一个简单的的实例，首先得html部分：

<div id="box">

<p>我是段落1</p>

<p>我是段落2</p>

</div>

两个选择器相对应的CSS代码如下：

#box p:nth-child(2) { color: red; }

#box p:nth-of-type(2) { color: red; }

上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色，如图1所示：

尽管上面两个例子的最后效果一致，但是两个选择器之间存在差异是必然的。

对于:nth-child选择器，意味着选择一个元素满足条件：

1．这是个段落元素

2．这是父标签的第二个孩子元素

图1  伪元素选择器

对于:nth-of-type选择器，意味着选择一个元素如果：

1、选择父标签的第二个段落子元素

我们把上面的实例稍作修改，就可以看到这两个选择器之间的差异表现了，如下HTML代码：

<div id="box">

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

</div>

同样，使用上面的CSS代码：

#box p:nth-child(2) { color: red; }

#box p:nth-of-type(2) { color: red; }

这时候两个选择器所渲染的结果就不一样了。

p:nth-child(2)没有达到原意，其渲染的结果不是第二个p标签文字变红，而是第一个p标签，也就是父标签的第二个子元素，效果如图2所示：

p:nth-of-type(2)达到了我们想要的结果，其把希望渲染的第二个p标签染红了，效果如图3所示：

图2  伪元素选择器

图3  伪元素选择器

对照上面两个选择器的语义，此处的效果表现差异不难理解。nth-child与nth-of-type的区别也可以看出。