引言
CSS选择器是CSS的核心基础，作用是精准匹配、定位页面中的HTML元素，为选中的元素统一设置样式规则。
一、ID选择器
ID选择器用于为页面中唯一的元素设置专属样式，一个页面中同一个ID只能使用一次。
ID选择器使用规则：HTML标签中通过 id="xxx" 定义，CSS中通过 #xxx 选取元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器</title>
<style>
#part1 {
color: aqua;
}
</style>
</head>
<body>
<div id="part1">id选择器</div>
</body>
</html>
二、Class类选择器
Class类选择器是开发中最常用的选择器，支持复用。可以同时作用于页面中多个元素，适合给一组统一风格的元素设置相同样式。
Class类选择器使用规则：HTML标签中通过 class="xxx" 定义，CSS中通过 .xxx 选取元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器</title>
<style>
.part1 {
color: aqua;
}
</style>
</head>
<body>
<div class="part1">class选择器1</div>
<div class="part1">class选择器2</div>
<div class="part1">class选择器3</div>
</body>
</html>
三、标签选择器
标签选择器直接通过HTML标签名称选中页面中所有同名标签，统一批量设置样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器</title>
<style>
/* 选择所有p标签的元素 */
p {
color: aqua;
}
</style>
</head>
<body>
<p>标签选择器1</p>
<p>标签选择器2</p>
<p>标签选择器3</p>
</body>
</html>
四、属性选择器
属性选择器根据HTML标签的属性及属性值匹配元素。
五、伪类选择器
伪类选择器用于匹配元素的不同状态，为元素添加动态交互样式，鼠标悬浮、点击、未访问、已访问等场景都靠伪类实现，下面以<a></a>为例。
注：:hover 和 :active 不只局限于a标签，在其他的div中也可使用，但 :link 和 :visited 只能用于a标签
另外，CSS3还新增大量结构性伪类，可以精准匹配排序后的元素。
六、伪元素选择器
常见的伪元素选择器有 ::before 和 ::after
::before的作用：在元素的内容前面插入新的内容
::after的作用：在元素的内容后面插入新的内容
注：在CSS2中伪元素选择器的写法是 :before 和 :after，功能相同只是写法不同而已，更推荐使用双冒号的版本
七、复合选择器
复合选择器是由多个基础选择器组合而成，用于更精准、更细分地选择元素。
八、通配符选择器
通配符选择器 * 匹配页面所有HTML元素，作用范围最大、权重最低，一般多用于全局样式重置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
</body>
</html>
九、选择器优先级
!important > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器
