CSS新增表单属性及结构伪类选择器（nth-child）

本文链接：https://blog.csdn.net/m0_57532232/article/details/148044456

input表单属性

二、CSS新增属性选择器

三、CSS新增结构伪类选择器

⚠️注意：nth-child会将父亲盒子里的所有的子盒子都首先排列序号，无论是p、div等等；之后从头遍历找寻div。

这时候可以使用nth-of-type ——>排列指定元素的序号

section div:nth-og-type(1) {
    
    background-color:blue;

}

举例:

四、CSS新增伪元素选择器的基本使用

div::before 权重为2

before和after的元素盒子在浏览器的元素检查中不显示

举例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        height: 300px;
        width: 300px;
        background-color: #900b0b;
        color: aliceblue;
        margin: 0 auto;
    }

    .box::before {
        /* 这个content必须存在 */
        content: '我';

    }

    .box::after {
        content: '约翰•皮耶夏特•安努•不理不理•肥嘟嘟左卫门';
    }
</style>

<body>
    <div class="box">
        是
    </div>
</body>

</html>