CSS选择器是用来选择HTML文档中的元素的模式，它可以根据元素的标签名、类名、ID等属性进行选择。在前端开发中，熟练掌握各种CSS选择器是非常重要的，因为它们可以帮助我们精确地定位和样式化页面中的元素。下面我将详细介绍常见的CSS选择器，并附上示例代码加以说明。
1. 元素选择器
元素选择器是最简单的一种选择器，它通过元素的标签名来选择元素。例如，div选择器会选择所有的<div>元素。
示例代码
div {
color: red;
}
上述代码会将页面中所有的<div>元素的文本颜色设置为红色。
2. 类选择器
类选择器通过元素的class属性来选择元素。在CSS中，类选择器以.开头，后面跟着类名。例如，.btn选择器会选择所有具有btn类的元素。
示例代码
.btn {
background-color: blue;
color: white;
}
上述代码会将所有具有btn类的元素的背景颜色设置为蓝色，文本颜色设置为白色。
3. ID选择器
ID选择器通过元素的id属性来选择元素。在CSS中，ID选择器以#开头，后面跟着ID名。例如，#header选择器会选择具有header ID的元素。
示例代码
#header {
font-size: 24px;
}
上述代码会将具有header ID的元素的字体大小设置为24像素。
4. 属性选择器
属性选择器允许根据元素的属性值来选择元素。有多种属性选择器，包括存在属性选择器、值属性选择器、前缀属性选择器、后缀属性选择器等。
示例代码
存在属性选择器：选择具有指定属性的元素。
[target] { color: green; }值属性选择器：选择具有指定属性值的元素。
[target="_blank"] { text-decoration: underline; }前缀属性选择器：选择具有以指定值开头的属性值的元素。
[class^="btn"] { background-color: yellow; }后缀属性选择器：选择具有以指定值结尾的属性值的元素。
[class$="btn"] { border: 1px solid black; }
5. 后代选择器
后代选择器（也称为包含选择器）用于选择元素的后代元素。它通过在选择器中使用空格来指定后代关系。例如，.container p选择器会选择所有在class为container的元素内部的<p>元素。
示例代码
.container p {
font-style: italic;
}
上述代码会将所有在class为container的元素内部的<p>元素的字体样式设置为斜体。
6. 子元素选择器
子元素选择器用于选择某个元素的直接子元素。它通过在选择器中使用>符号来指定父子关系。例如，.container > p选择器会选择所有作为class为container元素的直接子元素的<p>元素。
示例代码
.container > p {
font-weight: bold;
}
上述代码会将所有作为class为container元素的直接子元素的<p>元素的字体加粗。
7. 相邻兄弟选择器
相邻兄弟选择器用于选择某个元素之后紧跟着的同级元素。它通过在选择器中使用+符号来指定相邻兄弟关系。例如，.container + p选择器会选择紧跟着class为container元素之后的<p>元素。
示例代码
.container + p {
margin-top: 10px;
}
上述代码会将紧跟着class为container元素之后的<p>元素的上外边距设置为10像素。
8. 通用选择器
通用选择器（也称为星号选择器）用于选择所有元素。它以*符号表示。通用选择器通常用于对所有元素应用相同的样式。
示例代码
* {
box-sizing: border-box;
}
上述代码会将所有元素的盒模型设置为边框盒模型。
9. 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。例如，:hover伪类用于在鼠标悬停在元素上时应用样式。还有:focus、:active等伪类选择器，它们用于指定元素处于不同状态时的样式。
示例代码
a:hover {
color: red;
}
上述代码会在鼠标悬停在链接上时将其文本颜色设置为红色。
10. 伪元素选择器
伪元素选择器用于向某些元素的特定部分添加样式，例如元素的首字母、内容前后等。常见的伪元素选择器包括::before、::after等。
示例代码
p::first-line {
font-weight: bold;
}
上述代码会将段落元素的首行文本设置为加粗。
