CSS结构伪类选择器的用法

通过使用结构伪类选择器可以根据文档的结构指定元素的样式。这些选择器绝大多数都是 CSS3 新增加的，这给开发人员带来了很大的方便。

“伪类”的意思就是不需要重新定义的类，它们已经被定义好了。我们通常把具有共性的一些常用的结构信息提取出来作为伪类。除了使用指定类名的方法，我们还经常会遇到根据元素在 DOM（document object model，文档对象模型）结构中的顺序关系来选择元素的情况。例如希望选中排在某个特定次序位置的元素等，这时就会用到结构伪类选择器。

下面先进行概括描述，然后通过实际代码具体介绍。结构伪类选择器如下表所示。

表 1 结构伪类选择器
选择器	功能描述
E:first-chiId	作为父元素的第一个子元素的元素 E，与 E:nth-child 等同
E:last-chiId	作为父元索的最后一个子元索的元索 E，与 E:nth-last-child 等同
E:root	选择匹配元素 E 所在文档的根元素。在 HTML 文件中，根元素始终是 html，此时该选择器与 HTML 类型选择器匹配的内容相同
E:nth-child(n)	作为父元素的第 n 个子元素的元素 E。其中 n 可以是整数 (1，2，3)、关键字 (even，odd )、公式(2n+1)，而且 n 的起始值为 1，而不是 0
E:nth-last-child(n)	作为父元素的倒数第 n 个子元素的元素 E。此选择器与 E:nth-child(n) 选择器的计算顺序刚好相反，但使用方法都是一样的。其中 nth-last-child 始终匹配最后一个元素，与 last-child 等同
E:nth-of-type(n)	作为父元素的第 n 个具有指定类型的元素 E
E:nth-last-of-type(n)	作为父元素的倒数第 n 个具有指定类型的元素 E
E:first-of-type	作为父元素的第 1 个具有指定类型的元素 E，与 E:nth-of-type(1) 等同
E:last-of-type	作为父元素的最后 1 个具有指定类型的元素 E，与 E:nth-last-of-type(1) 同
E:only-child	选择父元素只包含一个子元素且与该子元素相匹配的元素 E
E:only-of-type	选择父元素只包含一个同类型子元素且与该子元素相匹配的元素 E
E:empty	选择没有子元素且不包含任何文本节点的元素 E

通过制作一个页面来具体介绍结构伪类选择器的实际用法。

<!DOCTYPE html>
<html>
<head>
     <style>
         h1:first-child, p:last-child{
             background:#ccc;
         }
         p:nth-child(2),p:nth-last-child(2) {
             border:1px solid #000;
        }
        p:first-of-type, p:nth-of-type(2){
            font-weight:bold;
        }
    </style>
</head>
<body>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
</body>
</html>

以上代码一共设置了 3 种样式：灰色背景、黑色边框和粗体文字，效果如下图所示。

图 1 结构伪类选择器

可以看到，使用了结构伪类选择器的元素是段落和标题，它们都是 body 元素的子元素，分为 3 条 CSS 语句。

h1:first-child 表示要选中 h1 元素，并且若要将其作为父元素的子元素，则其必须是第 1 个子元素，因此页面中的标题会被选中，从而会被设置为灰色背景。

接下来，p:nth-child(2) 和 p:nth-last-child(2) 表示要选中 p 元素，并且它们分别是第 2 个子元素和倒数第 2 个子元素，因此“第一个段落。”和“第三个段落。”分别会被选中，从而会被设置为黑色边框。

接下来，p:first-of-type 和 p:nth-of-type(2) 表示要选中 p 元素，并且它们分别是在这种类型的元素中的第 1 个和第 2 个，因此“第一个段落。”和“第二个段落。”分别会被选中，从而会被设置为粗体文字。

CSS结构伪类选择器的用法

相关文章