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

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 页面中的根元素(

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;
}

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

CSS中的十二种结构伪类选择器_第1张图片

: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 是用来定位所有

  • 元素中第一个作为子级元素的,而不是定位
  • 元素的第一个子级元素。

    :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;
    }
    

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

    CSS中的十二种结构伪类选择器_第2张图片

    :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的父元素下所有元素中的第一个元素。

    • 关键字: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>
    

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

    CSS中的十二种结构伪类选择器_第3张图片

    :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>
    

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

    CSS中的十二种结构伪类选择器_第4张图片

    :root

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

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

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

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

    CSS中的十二种结构伪类选择器_第5张图片

    总结

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

  • 你可能感兴趣的:(从头学前端,css,html5,html)