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>