CSS: CSS 选择器
选择器是 CSS 的核心——它的作用是"选中"你想要设置样式的 HTML 元素。CSS 提供了多种类型的选择器，从简单的标签选择器到复杂的选择器组合，让你能精确控制任意元素。
1. 基础选择器
(1) 1. 标签选择器（元素选择器）
直接使用 HTML 标签名作为选择器，会匹配文档中所有同名标签。
CSS
/* 所有 <p> 元素变红色 */
p {
color: red;
}
/* 所有 <h1> 元素变蓝色 */
h1 {
color: blue;
}
/* 所有 <div> 元素有边框 */
div {
border: 1px solid black;
}
(2) 2. 类选择器（Class Selector）
通过 HTML 元素的 class 属性来匹配元素。类名用英文句点 . 开头。
CSS
/* 所有 class="highlight" 的元素 */
.highlight {
background-color: yellow;
}
/* 只选中 class="center" 的 <p> 元素 */
p.center {
text-align: center;
}
HTML 元素可以有多个 class，用空格分隔：
HTML
<p class="highlight center">这段文字既高亮又居中</p>
(3) 3. ID 选择器
通过 HTML 元素的 id 属性来匹配元素，用井号 # 开头。
CSS
/* 选中 id="header" 的元素 */
#header {
background-color: #333;
color: white;
}
注意：一个页面中同一个 ID 只能出现一次，ID 选择器通常用于唯一的元素。
(4) 4. 通配符选择器
使用星号 * 匹配文档中所有元素。
CSS
/* 重置所有元素的外边距和内边距 */
* {
margin: 0;
padding: 0;
}
通配符选择器很方便，但要注意性能——如果应用了复杂样式，会影响页面渲染速度。
2. 选择器的优先级（权重）
当多个选择器作用于同一个元素时，浏览器根据优先级决定哪个样式生效。CSS 有一套权重计算规则：
| 选择器类型 | 权重值 |
|---|---|
| 行内样式（style属性） | 1000 |
| ID 选择器 | 0100 |
| 类/属性/伪类选择器 | 0010 |
| 标签/伪元素选择器 | 0001 |
| 通配符选择器 | 0000 |
优先级从高到低为：
行内样式 > ID 选择器 > 类选择器 > 标签选择器
(1) 权重计算示例
CSS
/* 权重：0001 */
p {
color: black;
}
/* 权重：0010 */
.text {
color: blue;
}
/* 权重：0100 */
#special {
color: green;
}
/* 权重：0011（类+标签） */
p.text {
color: red;
}
对于同一个 <p class="text" id="special"> 元素，最终文字颜色会是绿色（ID 选择器权重最高）。
(2) !important
CSS 提供了一个"核武器"——!important，可以强制某个样式优先级最高：
CSS
p {
color: red !important;
}
除非万不得已，不要使用 !important，它会让样式调试变得困难。优先通过增加选择器权重来解决问题。
3. 选择器的最佳实践
- 多用 class 选择器：class 可以复用，是最灵活的选择器
- 少用 ID 选择器：ID 唯一，不易复用，且权重太高容易覆盖问题
- 避免过度指定：
div.container ul li a这种写法太具体，用.nav-link就够 - 保持选择器简洁：选择器越长越难维护，也影响性能
▶ 示例
结合元素、类和 ID 选择器的完整示例:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: navy; } /* 标签选择器 */
.highlight { background: yellow; } /* 类选择器 */
#unique { font-weight: bold; } /* ID 选择器 */
* { box-sizing: border-box; } /* 通配符选择器 */
</style>
</head>
<body>
<h1>标题 1</h1>
<p class="highlight">高亮段落。</p>
<p id="unique">唯一元素。</p>
</body>
</html>
浏览器对匹配的元素应用每个规则：h1 变深蓝色，高亮段落有黄色背景，唯一元素加粗。
❓ 常见问题
Q class 和 id 选择器什么时候用哪个？
A id 在页面中只能出现一次，适合定位唯一的元素（如顶部导航、页脚）；class 可以重复使用，适合给多个元素加相同样式。CSS 优先用 class，只有遇到唯一元素才用 id。
Q 后代选择器（空格）和子选择器（>）有什么区别？
A 后代选择器选中所有层级的子孙元素，子选择器只选中直接子元素。比如
div p 会选中 div 里所有层级的 p，而 div > p 只选中 div 的直接子 p，不管孙子辈的 p。Q 通配选择器 * 会影响性能吗？
A 少量使用影响不大，但不建议在大范围上用。因为
* 匹配所有元素，浏览器会逐一检查，如果嵌套在复杂选择器里（如 #nav * li）可能造成性能浪费。全局 reset 用 * { box-sizing: border-box; } 这类简单用法没问题。📖 小节
选择器是 CSS 的基础技能。掌握标签选择器、类选择器和 ID 选择器这三种基础选择器，就能完成大部分样式工作。理解选择器的优先级规则，能帮你避免"为什么样式没生效"的困惑。在实际开发中，类选择器是使用最频繁的，建议尽量用 class 来定义样式。
📝 作业
- 创建一个 HTML 页面，包含标题、段落和列表。
- 使用标签选择器设置所有段落的文字颜色。
- 使用类选择器为特定的元素设置不同的背景颜色（至少定义 2 个不同的类）。
- 使用 ID 选择器为页面中的一个元素设置特殊样式。
- 测试：给同一个元素同时应用标签、类和 ID 选择器，观察哪个优先级最高。
