CSS中的十二种结构伪类选择器

965 阅读6分钟

这是我参与8月更文挑战的第29天,活动详情查看:8月更文挑战

Hello 大家好,我是一碗周,不是你想的那个“一碗粥”,是一个不想被喝掉的前端👨🏻‍💻,如果我写的文章有幸可以得到你的青睐,万分有幸~

这是【从头学前端】系列文章的第二十七篇-《CSS中的十二种结构伪类选择器》

本系列文章在掘金首发,编写不易转载请获得允许

写在前面

本篇文章我们将来学习CSS中的结构伪类选择器,该类选择器包含的内容如下表所示:

伪类选择器作用
selector:first-child用来定位一组兄弟元素中的第一个元素
selector:last-child用来定位一组兄弟元素中的最后一个元素
selector:nth-child(n)用来定位一组兄弟元素中的第n个元素
selector:nth-last-child(n)用来定位一组兄弟元素中倒序方式的第n个元素
selector:first-of-type用来定位一组同类型的兄弟元素中的第一个元素
selector:last-of-type用来定位一组同类型的兄弟元素中的最后一个元素
selector:nth-of-type(n)用来定位一组同类型的兄弟元素中的第n个元素
selector:nth-last-of-type(n)用来定位一组同类型的兄弟元素中倒序方式的第n个元素
selector:only-child用来定位一个没有任何兄弟元素的元素
selector:only-of-type用来定位一个没有任何同类型兄弟元素的元素
selector:empty用来定位一个没有子级元素的元素,并且该元素也没有任何文本内容
selector:root用来定位 HTML 页面中的根元素(<html>

CSS中的结构伪类选择器是根据HTML页面中元素之间的关系来定位HTML元素,从而减少对HTML元素的id属性和class属性的依赖。

:first-child与:last-child

:first-child伪类用来定义一组兄弟元素的第一个元素而:last-child伪类则是定位一组兄弟元素的最后一个元素。

如下示例代码展示了:first-child伪类和:last-child伪类的用法:

HTML结构如下:

<ul>
    <li>涂山红红</li>
    <li>涂山苏苏</li>
    <li>涂山蓉蓉</li>
    <li>涂山雅雅</li>
</ul>

CSS代码如下:

li:first-child {
    color: red;
}
li:last-child {
    color: blue;
}

代码运行结果如下图所示:

01_first-child和last-child伪类.png

:first-child 伪类可以使用:nth-child(n)伪类改写为:nth-child(1),而:last-child伪类可以使用:nth-last-child(n)伪类改写为:nth-last-child(1)

:first-child伪类和:last-child伪类经常会引起误解。例如 li:first-child 是用来定位所有<li>元素中第一个作为子级元素的,而不是定位<li>元素的第一个子级元素。

:first-of-type与:last-of-type

:first-of-type伪类和:last-of-type伪类一个用于定位一组元素中的第一个兄弟元素,一个用来定位最后一个。

如下示例代码展示了:first-of-type伪类和:last-of-type伪类的用法:

HTML结构如下:

<h3>狐妖小红娘</h3>
<p>涂山红红</p>
<p>涂山苏苏</li>

CSS代码如下:

p:first-of-type {
    color: red;
}

p:last-of-type {
    color: blue;
}

代码运行结果如下图所示:

02_first-of-type与last-of-type.png

:first-of-type伪类与:last-of-type伪类的用法一定要和:first-child伪类与:last-child伪类的用法区分开。以:first-of-type伪类和:first-child伪类为例来说明:

  • :first-of-type伪类是定位一组同类型的兄弟元素中的第一个元素,不管这个元素在兄弟元素中的位置如何。

  • :first-child伪类是定位一组兄弟元素中的第一个元素,这些兄弟元素不一定是同类型的。

如果将上述示例代码中的:first-of-type伪类改写为:first-child伪类的话,将不会生效。

:nth-child(n)与:nth-last-child(n)

:nth-child(n)伪类和:nth-last-child(n)伪类都是CSS3中新增的选择器,这两个选择器的用法基本上是一致的。区别在于:nth-last-child(n)伪类是倒序方式定位元素,也就是说,:nth-last-child(n)伪类是从一组元素的结尾开始的。

接下来,主要以:nth-child(n)伪类为例进行讲解。:nth-child(n)伪类中的n参数的含义具有3种情况:

  • 数字值:任意一个大于 0 的正整数。例如 #example td:nth-child(1) 表示定位ID为example的父元素下所有<td>元素中的第一个元素。

  • 关键字:odd表示奇数,等同于:nth-child(2n)even表示偶数,等同于:nth-child(2n+1)

  • 格式为(an+b)公式:a表示周期的长度(步长 ),n表示计数器(从 0 开始 ),而b则表示偏移值。

如下示例代码展示了:nth-child(n)伪类(实现表格隔行换色效果)的用法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child伪类</title>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
        }

        th,
        td {
            border-top: 1px solid lightcoral;
            text-align: center;
        }

        /* 最后一行单元格在底部增加一个边框效果 */
        tr:last-child td {
            border-bottom: 1px solid lightcoral;
        }

        /* 实现隔行换色 */
        tr:nth-child(even) {
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>区域</th>
        </tr>
        <tr>
            <td>梵云飞</td>
            <td>西西域</td>
        </tr>
        <tr>
            <td>欢都落兰</td>
            <td>南国</td>
        </tr>
        <tr>
            <td>石宽</td>
            <td>北山</td>
        </tr>
        <tr>
            <td>涂山红红</td>
            <td>涂山</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图所示:

03_隔行换色效果.png

:nth-child(n)伪类的n参数用法中比较复杂的是使用(an+b)公式用法,如下示例列举了一些公式用法:

  • :nth-child(5n):定位元素的序号是5 [=5×1]、10 [=5×2]、15 [=5×3]等。

  • :nth-child(3n+4):定位元素的序号是4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4] 等。

  • :nth-child(-n+3):定位元素的序号是3 [=-0+3]、2 [=-1+3]、1 [=-2+3]。

:nth-child(n)伪类与:nth-last-child(n)伪类和:nth-of-type(n)伪类与:nth-last-of-type(n)伪类的区别,类似于:first-of-type伪类与:last-of-type伪类和:first-child伪类与:last-child伪类的区别。

:empty

:empty伪类是用来定位没有任何子级元素或文本内容的元素,其中文本内容包含了空白。但是HTML的注释是不影响:empty伪类定位元素的。

如下示例代码展示了:empty伪类的用法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>empty伪类</title>
    <style>
        body {
            /* 开启flex布局 */
            display: flex;
        }

        .box {
            background: pink;
            height: 80px;
            width: 80px;
            margin: 0 20px;
        }

        .box:empty {
            background: lime;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box">这个元素的背景是粉色的</div>
    <div class="box">
        <!-- 这是一个注释 -->
    </div>
</body>

</html>

代码运行结果如下图所示:

04_empty伪类.png

:root

CSS中的:root伪类选择器比较简单,它代表的就是<html>元素。

如下代码展示的:root伪类的用法:

:root {
    height: 100vh;
    width: 100vw;
    background-color: dodgerblue;
}

代码运行结果如下图所示:

05_root伪类.png

总结

本篇文章学习了CSS中的结构伪类选择器,需要注意的就是相似结构伪类选择器之间的区别,具体可以参照文章一开始的那个表格。