css新增选择器（二十五课）

一、属性选择器

1、基本属性选择器（[attribute]）

含义与用途：选择具有指定属性的所有元素，而不管该属性的值是什么

2、属性值完全匹配选择器（[attribute = value]）

含义与用途：选择具有指定属性并且属性值完全匹配给定值的元素

3、以特定值开头的属性值选择器（[attribute ^= value]）

含义与用途 ：选择具有指定属性并且属性值以给定值开头的元素

4、以特定值结尾的属性值选择器（[attribute $= value]）

含义与用途 ：选择具有指定属性并且属性值以给定值结尾的元素

5、部分属性值匹配选择器（[attribute *= value]）

含义与用途：选择具有指定属性并且属性值包含给定值的元素。这在属性值是一个较长的字符串并且我们只关心其中一部分内容时非常有用

二、结构伪类选择器

定义：允许你根据元素在文档结构中的位置来选择元素。这些选择器主要关注元素之间的层次关系，如父子关系、兄弟关系，以及元素在一组兄弟元素中的顺序位置等信息

1、:first - child选择器

含义与用途：用于选择某个元素的第一个子元素。这在需要对父元素中的第一个子元素进行特殊样式设置时非常有用。例如，在一个列表中，你可能想要单独改变第一个列表项的样式。

2、:last - child选择器

含义与用途 ：选择某个元素的最后一个子元素。和:first - child相对应，它可以用于突出显示最后一个子元素的样式

3、:nth - child(n)选择器

含义与用途 ：选择某个元素的第 n 个子元素。其中，n 可以是一个数字、一个关键字（如even奇数（2n+1）或odd偶数（2n））或者一个表达式（如3n + 1，其中n从0开始计算）。这提供了非常灵活的方式来选择特定位置的子元素。

4、:nth - last - child(n)选择器

含义与用途 ：从最后一个子元素开始计数，选择第 n 个子元素。这和:nth - child(n)类似，但计数方向相反。

html 复制代码

    <style>
        ul li:first-child {
            color: aqua;
        }

        ul li:last-child {
            color: red;
        }

        ul li:nth-child(5) {
            color: yellow;
        }

        ul li:nth-child(even) {
            color: #ccc;
        }

        ul li:nth-last-child(2n) {
            color: orange;
        }
    </style>

:nth - child(n)选择器

选择规则 ：它是基于元素在父元素中的位置来进行选择的。计算位置时，会把所有类型的子元素都考虑进去。也就是说，它会按照子元素在父元素中的出现顺序，从 1 开始计数，不管这些子元素的标签类型是否相同。

:nth - of - type(n)选择器

选择规则 ：这个选择器是在同类型的元素中，根据元素在父元素中的位置来选择。它只考虑具有相同标签类型的元素序列，然后在这个序列中计数并选择

html 复制代码

    <style>
        ul li:nth-child(1) {
            color: aqua;
        }

        ul li:nth-of-type(1) {
            color: rgb(84, 187, 24);
        }
    </style>
<body>
    <ul>
        <span>灰太狼 </span>
        <li>喜羊羊</li>
        <li>美羊羊</li>
        <li>沸羊羊</li>
    </ul>
</body>

三、伪元素选择器

1、::before伪元素选择器

含义与用途：用于在被选元素的内容之前插入内容。这个插入的内容可以是文本、图像等各种形式，并且可以通过 CSS 进行样式设置

2、::after伪元素选择器

含义与用途 ：和::before相反，它用于在被选元素的内容之后插入内容。同样，插入的内容可以进行样式设置。

html 复制代码

    <style>
        div::before {
            content: '我';
        }

        div::after {
            content: '小猪';
        }

        div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
<body>
    <div>是</div>
</body>

伪元素使用场景一------配合字体图标图标

html 复制代码

    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?w1lxzp');
            src: url('fonts/icomoon.eot?w1lxzp#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?w1lxzp') format('truetype'),
                url('fonts/icomoon.woff?w1lxzp') format('woff'),
                url('fonts/icomoon.svg?w1lxzp#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 30px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            right: 10px;
            top: 7px;
            font-family: 'icomoon';
            content: '';
        }
    </style>
<body>
    <div></div>
</body>

伪元素使用场景二------配合页面叠加效果

css 复制代码

 .box::before {
            content: '';
            position: absolute;
            /* 隐藏灰色遮罩层 */
            display: none;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0, 0, 0, 0.5);
        }

        .box:hover::before {
            display: block;
        }

伪元素使用场景三------清除浮动

css 复制代码

  .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }