CSS 选择器详解
CSS 选择器用于选择需要添加样式的HTML元素，是CSS规则集的重要组成部分。通过选择器，可以根据元素的id、class、类型、属性等特征来精准定位页面元素。
选择器类型概述
CSS提供了多种选择器类型，每种类型适用于不同的场景，下面我们将详细介绍主要的选择器类别。
元素选择器
元素选择器通过HTML元素名称直接选择目标元素，是最基础的选择器类型。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: #3366cc;
}
</style>
</head>
<body>
<p>所有段落文本都会应用此样式。</p>
<p>这个段落也会被选中。</p>
<p>这个段落同样会受到影响。</p>
</body>
</html>
ID 选择器
ID选择器通过元素的id属性来选择特定元素。由于页面中id应该是唯一的，因此此选择器用于选择单个特定元素。
书写格式为井号(#)后跟id名称。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#special {
text-align: center;
color: #cc3366;
}
</style>
</head>
<body>
<p id="special">此段落具有特殊样式。</p>
<p>此段落保持默认样式。</p>
</body>
</html>
类选择器
类选择器通过class属性选择元素，适用于多个元素需要相同样式的情况。书写时使用点号(.)后跟类名。
注意：类名不应以数字开头。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: #ffffcc;
padding: 8px;
border-left: 4px solid #ffcc00;
}
</style>
</head>
<body>
<h3 class="highlight">重要提示标题</h3>
<p class="highlight">这是需要突出显示的文本内容。</p>
</body>
</html>
特定元素的类选择器
如果需要限定只有特定类型的元素应用类样式，可以结合元素名和类选择器。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
p.note {
font-style: italic;
color: #666666;
}
</style>
</head>
<body>
<h3 class="note">此标题不会应用样式</h3>
<p class="note">此段落会显示为灰色斜体。</p>
</body>
</html>
通用选择器
通用选择器使用星号(*)表示，它会匹配页面中的所有元素。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h3>页面标题</h3>
<p>所有元素都会应用通用样式。</p>
<div>包括这个div元素。</div>
</body>
</html>
分组选择器
分组选择器可以将多个选择器组合在一起，为它们定义相同的样式规则，从而减少代码重复。
分组时使用逗号分隔各个选择器。
未使用分组前的代码：
h3 {
text-align: center;
color: #3366cc;
}
h4 {
text-align: center;
color: #3366cc;
}
p {
text-align: center;
color: #3366cc;
}
使用分组选择器后：
h3, h4, p {
text-align: center;
color: #3366cc;
}
完整示例：
<!DOCTYPE html>
<html>
<head>
<style>
h3, h4, p {
text-align: center;
color: #3366cc;
}
</style>
</head>
<body>
<h3>一级标题</h3>
<h4>二级标题</h4>
<p>段落文本内容。</p>
</body>
</html>
本节课程知识要点
-
元素选择器通过标签名选择元素，适用于统一某类元素的样式
-
ID选择器通过#id选择特定元素，适用于唯一元素的样式定义
-
类选择器通过.class选择元素，可重复使用，适用于多个元素的相同样式
-
通用选择器使用*选择所有元素，常用于重置默认样式
-
分组选择器通过逗号分隔多个选择器，可提高代码效率
对HTML不熟悉的，可以访问HTML教程可参考：https://www.ebingou.cn/biancheng/htmlcss/html/
理解并熟练运用各种CSS选择器是前端开发的基础技能，能够帮助开发者更精准地控制页面样式表现
