HTML 页面的 CSS 选择器详解

1. 什么是 CSS 选择器

CSS 选择器（Selector）是 CSS 中用于选中 HTML 元素并为其应用样式的规则。简单来说，选择器告诉浏览器「我要给页面上的哪些元素设置样式」。

一个完整的 CSS 规则由「选择器」和「声明块」组成：

css 复制代码

/* 选择器：p */
/* 声明块：{ color: red; } */
p {
  color: red;
}

上面的代码表示：选中页面中所有的 <p> 段落元素，并将它们的文字颜色设置为红色。

2. 基础选择器

基础选择器是最常用、最简单的选择器，包括标签选择器、类选择器、ID 选择器和通配符选择器。

2.1 标签选择器（元素选择器）

直接使用 HTML 标签名作为选择器，选中页面中所有该标签的元素。

css 复制代码

h1 {
  font-size: 32px;
}

p {
  line-height: 1.6;
}

2.2 类选择器（Class Selector）

以 . 开头，选中所有带有指定 class 属性的元素。类选择器可以重复使用，是实际开发中使用频率最高的选择器。

css 复制代码

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

html 复制代码

<div class="card">卡片一</div>
<div class="card">卡片二</div>

2.3 ID 选择器

以 # 开头，选中带有指定 id 属性的元素。ID 在页面中应当是唯一的，因此 ID 选择器通常用于选中页面中唯一的元素。

css 复制代码

#header {
  height: 60px;
  background: #333;
}

html 复制代码

<header id="header">网站头部</header>

2.4 通配符选择器

使用 * 匹配页面中所有元素，常用于重置默认样式。

css 复制代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. 组合选择器

组合选择器通过符号将多个基础选择器组合起来，实现更精确的定位。

3.1 后代选择器（空格）

选中某元素内部所有符合条件的后代元素（包括子元素、孙元素等）。

css 复制代码

/* 选中 div 内部所有的 p 元素 */
div p {
  color: #666;
}

3.2 子元素选择器（>）

只选中某元素的直接子元素，不包含孙元素及更深的层级。

css 复制代码

/* 只选中 div 的直接子元素 p */
div > p {
  color: #333;
}

3.3 相邻兄弟选择器（+）

选中紧跟在某元素后面的第一个兄弟元素。

css 复制代码

/* 选中 h2 后面紧邻的第一个 p */
h2 + p {
  font-weight: bold;
}

3.4 通用兄弟选择器（~）

选中某元素后面所有符合条件的兄弟元素。

css 复制代码

/* 选中 h2 后面所有的 p 兄弟元素 */
h2 ~ p {
  color: #999;
}

3.5 并集选择器（逗号）

用逗号分隔多个选择器，一次性为它们设置相同的样式。

css 复制代码

h1, h2, h3 {
  font-family: "Microsoft YaHei", sans-serif;
}

4. 属性选择器

属性选择器根据元素的属性或属性值 来选中元素，语法为 [属性名] 或 [属性名="值"]。

css 复制代码

/* 选中所有带 href 属性的 a 标签 */
a[href] {
  color: blue;
}

/* 选中 href 属性值完全等于指定地址的 a 标签 */
a[href="https://example.com"] {
  color: green;
}

/* 选中 href 属性值以 https:// 开头的 a 标签 */
a[href^="https://"] {
  color: orange;
}

/* 选中 href 属性值以 .pdf 结尾的 a 标签 */
a[href$=".pdf"] {
  color: red;
}

/* 选中 href 属性值包含 "blog" 的 a 标签 */
a[href*="blog"] {
  font-weight: bold;
}

常用属性选择器符号：

符号	含义	示例
`[attr]`	存在该属性	`[disabled]`
`[attr="v"]`	属性值完全等于 v	`[type="text"]`
`[attr^="v"]`	属性值以 v 开头	`[href^="https"]`
`[attr$="v"]`	属性值以 v 结尾	`[href$=".pdf"]`
`[attr*="v"]`	属性值包含 v	`[title*="css"]`

5. 伪类选择器

伪类选择器用于选中元素的特定状态 ，以冒号 : 开头。

5.1 常用交互伪类

css 复制代码

/* 鼠标悬停时 */
a:hover {
  color: red;
}

/* 元素获得焦点时（如输入框被点击） */
input:focus {
  border-color: #4a90d9;
  outline: none;
}

/* 链接访问前 */
a:link {
  color: blue;
}

/* 链接访问后 */
a:visited {
  color: purple;
}

/* 元素被激活（鼠标按下未松开） */
button:active {
  transform: scale(0.95);
}

5.2 结构性伪类

css 复制代码

/* 第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 最后一个子元素 */
li:last-child {
  border-bottom: none;
}

/* 第 n 个子元素，n 从 1 开始 */
li:nth-child(2) {
  background: #f5f5f5;
}

/* 奇数位置的子元素 */
li:nth-child(odd) {
  background: #fafafa;
}

/* 偶数位置的子元素 */
li:nth-child(even) {
  background: #fff;
}

/* 同类型中的第一个 */
p:first-of-type {
  font-size: 18px;
}

5.3 表单状态伪类

css 复制代码

/* 被选中的复选框或单选框 */
input:checked {
  accent-color: #4a90d9;
}

/* 必填项 */
input:required {
  border-left: 3px solid red;
}

/* 可用与禁用状态 */
input:enabled {
  background: #fff;
}
input:disabled {
  background: #eee;
  cursor: not-allowed;
}

6. 伪元素选择器

伪元素用于选中元素的某一部分 或生成不存在于 HTML 中的内容 ，以双冒号 :: 开头。

css 复制代码

/* 元素内容的第一行 */
p::first-line {
  font-weight: bold;
}

/* 元素内容的第一个字 */
p::first-letter {
  font-size: 32px;
  float: left;
}

/* 在元素内容之前插入内容 */
.card::before {
  content: "★ ";
  color: gold;
}

/* 在元素内容之后插入内容 */
.card::after {
  content: "";
  display: block;
  clear: both;
}

/* 选中用户用鼠标选中的文本 */
::selection {
  background: #4a90d9;
  color: #fff;
}

注意：::before 和 ::after 必须配合 content 属性使用，否则不会显示任何内容。

7. 选择器优先级（权重）

当多个选择器同时命中同一个元素且样式冲突时，浏览器按照**优先级（权重）**决定最终生效的样式。

选择器类型	权重值
内联样式（style 属性）	1000
ID 选择器	100
类选择器、属性选择器、伪类	10
标签选择器、伪元素	1
通配符 `*`	0

权重计算规则：将各部分的权重值相加，数值大的优先；权重相同时，后写的样式覆盖先写的样式。

css 复制代码

/* 权重：1 */
p {
  color: black;
}

/* 权重：10 */
.text {
  color: blue;
}

/* 权重：100 */
#intro {
  color: red;
}

上面的例子中，如果同一个 <p> 元素同时带有 class="text" 和 id="intro"，最终文字颜色为红色（ID 选择器权重最高）。

8. 选择器最佳实践

优先使用类选择器：类选择器可复用、权重适中、语义清晰，是日常开发的首选。
避免过度使用 ID 选择器：ID 权重过高，后期难以覆盖，且无法复用。
不要滥用 !important：它会打破正常的优先级规则，导致样式难以维护。
控制选择器嵌套深度 ：过深的嵌套（如 .nav ul li a span）会降低可读性和性能，建议不超过 3 层。
保持选择器简洁 ：能用 .card-title 就不要写 .card .content .title。

9. 总结

CSS 选择器是前端开发的基础功，掌握好各类选择器的用法和优先级规则，能够让你更高效、更精准地控制页面样式。建议在实际项目中多动手练习，逐步熟悉不同选择器的适用场景。

选择器类型	语法示例	作用
标签选择器	`p`	选中所有 p 元素
类选择器	`.card`	选中所有 class 为 card 的元素
ID 选择器	`#header`	选中 id 为 header 的元素
后代选择器	`div p`	选中 div 内所有 p
子元素选择器	`div > p`	选中 div 的直接子元素 p
属性选择器	`[type="text"]`	按属性值选中元素
伪类选择器	`a:hover`	选中特定状态的元素
伪元素选择器	`p::first-line`	选中元素的部分内容