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

2025/5/22 13:58:21 来源：https://blog.csdn.net/m0_57532232/article/details/148044456 浏览: 次关键词：CSS新增表单属性及结构伪类选择器（nth-child）

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>