文章目录:
1.结构伪类选择器
作用:根据元素的结构关系查找元素。
一个列表结构使用结构伪类选择器的例子
<style>
li:first-child{
background-color: green;
}
</style>
<body>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
<li>li 5</li>
<li>li 6</li>
<li>li 7</li>
<li>li 8</li>
</ul>
</body>
2.伪元素选择器
作用:创建虚拟元素（伪元素），用来摆放装饰性的内容。
注意点:
- 必须设置content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
- 伪元素默认是行内显示模式
- 权重和标签选择器相同
举个例子:
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
}
div::before{
content:"老鼠";
}
div::after{
content: "大米"";
}
</style>
<body>
<!--标签内容:老鼠爱大米-->
<div>爱</div>
</body>
</html>
输出为:老鼠爱大米
