CSS 选择器介绍

在 CSS 中，选择器是连接 HTML 结构与样式规则的桥梁。它的核心作用是精准定位网页中的 HTML 元素，从而将定义好的样式规则应用到目标元素上。掌握 CSS 选择器是实现"样式精准控制"的基础，也是编写高效、可维护 CSS 代码的关键。本文将按类别详细介绍 CSS 中常用的选择器类型、语法及应用场景。

常用选择器速查表

分类	选择器	示例	适用范围	说明
基础选择器	ID 选择器	`#header`	任意元素	匹配指定 `id` 的唯一元素，优先级高
	类选择器	`.active`	任意元素	匹配 `class` 属性包含指定类名的元素，可复用
	标签选择器	`p`	HTML 标签	匹配页面中所有指定标签的元素，优先级低
	通配符选择器	`*`	任意元素	匹配所有元素，常用于样式重置
	属性选择器	`[attr]`	任意元素	匹配包含指定属性的元素
	属性选择器	`[attr="value"]`	任意元素	匹配属性值完全等于 `value` 的元素
	属性选择器	`[attr^="value"]`	任意元素	匹配属性值以 `value` 开头的元素
	属性选择器	`[attr$="value"]`	任意元素	匹配属性值以 `value` 结尾的元素
	属性选择器	`[attr*="value"]`	任意元素	匹配属性值包含 `value` 的元素
复合选择器	群组选择器	`h1, h2, h3`	任意元素	同时匹配多个选择器，应用相同样式
	后代选择器	`div p`	任意元素	匹配指定父元素的所有后代元素
	子选择器	`ul > li`	任意元素	仅匹配父元素的直接子元素
	相邻兄弟选择器	`h2 + p`	任意元素	匹配紧邻前元素的下一个同级元素
	通用兄弟选择器	`h3 ~ div`	任意元素	匹配前元素后面的所有同级元素
伪类选择器	状态伪类	`:active`	任意元素	匹配元素被点击激活状态
	状态伪类	`:focus`	任意元素	匹配元素获得焦点状态
	状态伪类	`:hover`	任意元素	匹配鼠标悬停状态
	状态伪类	`:link`	`<a>` 标签	匹配未访问的链接
	状态伪类	`:visited`	`<a>` 标签	匹配已访问的链接
	表单伪类	`:checked`	`<input type="checkbox">` 或 `<input type="radio">`	匹配选中的复选框或单选按钮
	表单伪类	`:disabled`	表单元素	匹配被禁用的元素
	表单伪类	`:enabled`	表单元素	匹配可用元素
	表单伪类	`:required`	表单元素	匹配必填元素
	表单伪类	`:optional`	表单元素	匹配非必填元素
	表单伪类	`:valid`	表单元素	匹配验证通过的元素
	表单伪类	`:invalid`	表单元素	匹配验证失败的元素
	结构伪类	`:first-child`	任意元素	匹配父元素的第一个子元素
	结构伪类	`:last-child`	任意元素	匹配父元素的最后一个子元素
	结构伪类	`:nth-child(n)`	任意元素	匹配父元素的第 n 个子元素
	结构伪类	`:nth-last-child(n)`	任意元素	匹配父元素的倒数第 n 个子元素
	结构伪类	`:only-child`	任意元素	匹配父元素唯一子元素
	结构伪类	`:first-of-type`	任意元素	匹配同类型的第一个元素
	结构伪类	`:last-of-type`	任意元素	匹配同类型的最后一个元素
	结构伪类	`:nth-of-type(n)`	任意元素	匹配同类型的第 n 个元素
伪元素选择器	`::after`	`.btn::after`	任意元素	在元素内容后插入虚拟元素
	`::before`	`blockquote::before`	任意元素	在元素内容前插入虚拟元素
	`::first-letter`	`p::first-letter`	块级元素	匹配文本第一个字母
	`::first-line`	`p::first-line`	块级元素	匹配文本第一行
	`::selection`	`::selection`	任意元素	匹配选中文本部分

一、选择器的基本概念

CSS 选择器是 CSS 规则的开头部分，用于指定"哪些元素会受到该规则的影响"。一个完整的 CSS 规则由"选择器"和"声明块"组成，基本结构如下：

复制代码

选择器 {
  属性名: 属性值; /* 声明块：定义元素的样式 */
}

例如，通过选择器 p 可将所有段落元素的文字颜色设置为灰色：

复制代码

p {
  color: #666;
}

选择器的核心价值在于精准匹配元素------无论是单个元素、一类元素，还是满足特定条件的元素，都能通过合适的选择器准确定位，避免样式"误应用"或"漏应用"。

二、基础选择器

基础选择器是 CSS 中最常用、最基础的选择方式，直接根据元素的标签名、类名、ID 等基础属性进行匹配。

1. 标签选择器（Type Selector）

语法：直接使用 HTML 标签名（如 p、div、h1）。
作用：匹配页面中所有该类型的标签元素。
特点：匹配范围广，优先级较低，适合为同类型元素设置通用样式。

示例：

复制代码

/* 所有 <h1> 标签文字居中、加粗 */
h1 {
  text-align: center;
  font-weight: bold;
}

/* 所有 <a> 标签去除下划线 */
a {
  text-decoration: none;
}

2. 类选择器（Class Selector）

语法：以 . 开头，后跟类名（如 .active、.container），类名由开发者自定义。
作用：匹配所有 class 属性包含对应类名的元素。
特点：
- 一个元素可添加多个类名（用空格分隔），如 <div class="box red"> 可匹配 .box 和 .red 两个选择器。
- 可跨标签复用，不同类型的元素可使用同一个类名。
适用场景：为多个元素设置相同样式，或为同一元素设置多种样式组合。

示例：

复制代码

/* 所有含 class="warning" 的元素添加黄色背景 */
.warning {
  background-color: #fff3cd;
  padding: 10px;
}

/* 所有含 class="large-text" 的元素文字放大 */
.large-text {
  font-size: 1.2em;
}

对应 HTML：

复制代码

<p class="warning">这是一条警告信息</p>
<div class="warning large-text">这是一条放大的警告信息</div>

3. ID 选择器（ID Selector）

语法：以 # 开头，后跟 ID 名（如 #header、#logo），ID 名由开发者自定义。
作用：匹配页面中 id 属性等于对应 ID 名的唯一元素 （HTML 规范要求 id 在页面中必须唯一）。
特点：优先级高，仅作用于单个元素，不适合复用。
适用场景：定位页面中唯一的关键元素（如头部、导航栏、页脚），或配合 JavaScript 操作特定元素。

示例：

复制代码

/* ID 为 "header" 的元素设置高度和背景 */
#header {
  height: 80px;
  background-color: #333;
}

对应 HTML：

复制代码

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

4. 通配符选择器（Universal Selector）

语法：使用 * 表示。
作用：匹配页面中所有元素 （包括 <html>、<body> 等根元素）。
特点：匹配范围最广，优先级最低，通常用于重置默认样式。
适用场景：清除浏览器默认的边距、内边距，或为所有元素设置通用基础样式。

示例：

复制代码

/* 清除所有元素的默认边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 统一盒模型计算方式 */
}

5. 属性选择器（Attribute Selector）

语法：通过元素的属性及属性值匹配元素，基础格式为 [属性名] 或 [属性名="属性值"]。
作用：匹配具有指定属性或属性值符合条件的元素。
常见语法变体：
- [attr]：匹配具有 attr 属性的元素（无论属性值是什么）。
- [attr="value"]：匹配 attr 属性值完全等于 value 的元素。
- [attr^="value"]：匹配 attr 属性值以 value 开头的元素。
- [attr$="value"]：匹配 attr 属性值以 value 结尾的元素。
- [attr*="value"]：匹配 attr 属性值**包含 value**的元素。
适用场景：为具有特定属性的元素设置样式（如表单元素、自定义属性元素）。

示例：

复制代码

/* 所有带 title 属性的元素添加虚线边框 */
[title] {
  border: 1px dashed #999;
}

/* 所有 type="text" 的 input 输入框设置宽度 */
input[type="text"] {
  width: 200px;
  padding: 5px;
}

/* 所有 href 以 "https://" 开头的链接添加图标 */
a[href^="https://"] {
  background: url("secure-icon.png") no-repeat right center;
  padding-right: 20px;
}

/* 所有 class 包含 "btn" 的元素设置按钮基础样式 */
[class*="btn"] {
  display: inline-block;
  padding: 8px 16px;
}

三、复合选择器

复合选择器由多个基础选择器组合而成，用于更精准地匹配元素，常见类型包括后代选择器、子选择器、相邻兄弟选择器等。

1. 后代选择器（Descendant Selector）

语法：多个选择器之间用空格分隔（如 父选择器后代选择器）。
作用：匹配"父选择器"所匹配元素的所有后代元素（包括直接子元素和嵌套更深的元素）。
特点：不限制层级关系，只要是嵌套在内部的后代元素都能匹配。

示例：

复制代码

/* 匹配 <nav> 内所有 <a> 标签（无论嵌套层级） */
nav a {
  color: #333;
  margin: 0 10px;
}

/* 匹配 <ul class="menu"> 内所有 <li> 标签 */
ul.menu li {
  list-style: none; /* 去除列表默认圆点 */
}

对应 HTML：

复制代码

<nav>
  <a href="/home">首页</a>
  <div>
    <a href="/about">关于我们</a> <!-- 同样会被匹配 -->
  </div>
</nav>

2. 子选择器（Child Selector）

语法：多个选择器之间用 > 连接（如 父选择器 > 子选择器）。
作用：仅匹配"父选择器"所匹配元素的直接子元素（不包括嵌套更深的后代元素）。
特点：严格限制层级，只匹配"父子"关系的元素，不匹配"祖孙"或更深层级的元素。

示例：

复制代码

/* 仅匹配 <ul> 的直接子元素 <li>（不匹配 <li> 内的嵌套 <li>） */
ul > li {
  border-bottom: 1px solid #eee;
}

/* 仅匹配 <div class="header"> 的直接子元素 <h1> */
.header > h1 {
  margin: 0;
}

对应 HTML：

复制代码

<ul>
  <li>一级菜单
    <ul>
      <li>二级菜单</li> <!-- 不会被 ul > li 匹配 -->
    </ul>
  </li>
</ul>

3. 相邻兄弟选择器（Adjacent Sibling Selector）

语法：两个选择器之间用 + 连接（如 前元素选择器 + 后元素选择器）。
作用：匹配"前元素选择器"所匹配元素的紧邻下一个同级元素（必须同属一个父元素，且紧随其后）。
特点：仅匹配"紧挨着"的下一个兄弟元素，且两者必须是同级关系。

示例：

复制代码

/* 匹配 <h2> 后紧邻的第一个 <p> 元素 */
h2 + p {
  margin-top: 10px; /* 为标题后的第一段文字减少上边距 */
  font-weight: bold;
}

/* 匹配 .active 类元素后紧邻的 .item 元素 */
.active + .item {
  border-left: 3px solid #f00;
}

对应 HTML：

复制代码

<h2>文章标题</h2>
<p>这是标题后的第一段文字（会被匹配）</p>
<p>这是第二段文字（不会被匹配）</p>

4. 通用兄弟选择器（General Sibling Selector）

语法：两个选择器之间用 ~ 连接（如 前元素选择器 ~ 后元素选择器）。
作用：匹配"前元素选择器"所匹配元素的所有后续同级元素（同属一个父元素，无需紧邻）。
特点：匹配所有"后面的同级元素"，不要求紧邻，只要在结构上位于后面即可。

示例：

复制代码

/* 匹配 <h3> 后面所有同级的 <div> 元素 */
h3 ~ div {
  background-color: #f9f9f9;
  padding: 10px;
}

对应 HTML：

复制代码

<h3>章节标题</h3>
<div>内容1（会被匹配）</div>
<p>其他内容</p>
<div>内容2（会被匹配）</div>

5. 群组选择器（Group Selector）

语法：多个选择器之间用 , 分隔（如 选择器1, 选择器2, 选择器3）。
作用：同时为多个不同的选择器匹配的元素应用相同的样式。
特点：减少重复代码，将多个选择器合并为一组，共享同一份样式声明。

示例：

复制代码

/* 为 h1、h2、h3 标签设置相同的字体和颜色 */
h1, h2, h3 {
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
}

/* 为 .btn 和 #submit-btn 设置相同的按钮基础样式 */
.btn, #submit-btn {
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

四、伪类选择器

伪类选择器用于匹配元素的特定状态或位置 （如鼠标悬停、第一个子元素），语法以 : 开头。伪类不直接匹配元素的标签或属性，而是基于元素的动态状态或文档结构进行匹配。

1. 状态伪类

用于匹配元素在用户交互中的动态状态，常见场景包括鼠标悬停、点击、聚焦等。

:hover：匹配鼠标悬停在元素上的状态（常用于链接、按钮）。
:active：匹配元素被点击激活的状态（通常是鼠标按下未松开时）。
:focus：匹配元素获得焦点的状态（如输入框被选中时）。
:visited：匹配已被访问过 的链接（仅用于 <a> 标签，且样式限制较多）。
:link：匹配未被访问过 的链接（仅用于 <a> 标签）。

示例：

复制代码

/* 链接默认样式 */
a:link {
  color: #0066cc;
}

/* 已访问链接样式 */
a:visited {
  color: #663399;
}

/* 鼠标悬停链接样式 */
a:hover {
  color: #ff6600;
  text-decoration: underline;
}

/* 点击链接时样式 */
a:active {
  color: #ff0000;
}

/* 输入框聚焦时样式 */
input:focus {
  outline: 2px solid #4d90fe;
  border-color: #4d90fe;
}

2. 结构伪类

用于根据元素在文档结构中的位置（如第 n 个子元素、第一个元素）进行匹配，常用语法如下：

:first-child：匹配父元素的第一个子元素。
:last-child：匹配父元素的最后一个子元素。
:nth-child(n)：匹配父元素的第 n 个子元素 （n 为数字、even 偶数、odd 奇数）。
:nth-last-child(n)：匹配父元素的倒数第 n 个子元素。
:only-child：匹配父元素中唯一的子元素（该元素没有兄弟元素）。
:first-of-type：匹配父元素中同类型的第一个子元素 （与 :first-child 区别：只看同类型）。
:last-of-type：匹配父元素中同类型的最后一个子元素。
:nth-of-type(n)：匹配父元素中同类型的第 n 个子元素。

示例：

复制代码

/* 列表中第一个 li 元素添加边框 */
ul li:first-child {
  border-top: 1px solid #ddd;
}

/* 列表中最后一个 li 元素去除下边框 */
ul li:last-child {
  border-bottom: none;
}

/* 表格中偶数行添加灰色背景（隔行变色） */
table tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 匹配父元素中唯一的 p 元素 */
p:only-child {
  font-style: italic;
}

/* 匹配 div 中第 2 个 span 元素 */
div span:nth-of-type(2) {
  color: #f00;
}

3. 表单伪类

专门用于匹配表单元素的特定状态（如禁用、选中、必填等）。

:disabled：匹配被禁用 的表单元素（disabled 属性为 true）。
:enabled：匹配可用的表单元素（默认状态，未被禁用）。
:checked：匹配被选中 的单选按钮（radio）或复选框（checkbox）。
:required：匹配带有 required 属性的必填表单元素。
:optional：匹配非必填 的表单元素（未带 required 属性）。
:valid：匹配验证通过的表单元素（如符合格式的邮箱、手机号）。
:invalid：匹配验证失败的表单元素（如格式错误的邮箱）。

示例：

复制代码

/* 禁用的按钮样式 */
button:disabled {
  background-color: #ccc;
  cursor: not-allowed; /* 鼠标变为禁止图标 */
  color: #999;
}

/* 选中的复选框后的文字加粗 */
input[type="checkbox"]:checked + label {
  font-weight: bold;
}

/* 必填输入框添加星号标记 */
input:required {
  border-left: 3px solid #f00;
}

/* 验证通过的输入框样式 */
input:valid {
  border-color: #0f0;
}

/* 验证失败的输入框样式 */
input:invalid {
  border-color: #f00;
}

五、伪元素选择器

伪元素选择器用于匹配元素的特定部分 （如首字母、前后内容），语法以 :: 开头（CSS3 规范区分伪类 : 和伪元素 ::，但旧浏览器也支持 : 写法）。伪元素不是真实存在的 HTML 元素，而是由 CSS 动态创建的"虚拟元素"。

1. `::before` 和 `::after`

作用：在元素的内容前 （::before）或内容后 （::after）插入虚拟内容。
必须属性 ：配合 content 属性使用，content 可设置文本、空值或引用资源（如图片）。
适用场景：添加装饰性元素（如图标、引号）、清除浮动、实现特殊布局效果等。

示例：

复制代码

/* 在引用文本前添加左引号 */
blockquote::before {
  content: """; /* 插入左引号 */
  font-size: 2em;
  color: #999;
  float: left;
  margin-right: 10px;
}

/* 在按钮后添加箭头图标 */
.btn-arrow::after {
  content: "→"; /* 插入箭头符号 */
  margin-left: 5px;
}

/* 清除浮动（经典 clearfix 技巧） */
.clearfix::after {
  content: ""; /* 空内容 */
  display: block;
  clear: both;
}

对应 HTML：

复制代码

<blockquote>这是一段引用文本</blockquote>
<button class="btn-arrow">点击查看</button>
<div class="clearfix">
  <!-- 内部浮动元素 -->
</div>

2. `::first-letter` 和 `::first-line`

::first-letter：匹配元素文本内容的第一个字母（仅适用于块级元素）。
::first-line：匹配元素文本内容的第一行（仅适用于块级元素，受容器宽度影响）。

示例：

复制代码

/* 段落首字母放大 */
p::first-letter {
  font-size: 2.5em;
  font-weight: bold;
  color: #f00;
  float: left;
  margin-right: 5px;
}

/* 段落第一行文字加粗 */
p::first-line {
  font-weight: bold;
  color: #0066cc;
}

3. `::selection`

作用：匹配用户选中的文本部分（如鼠标拖动选中的文字）。
限制：仅支持少数样式属性（如 color、background-color、text-shadow）。

示例：

复制代码

/* 自定义选中文本的样式 */
::selection {
  background-color: #ffecb3;
  color: #e65100;
}

/* 火狐浏览器兼容写法 */
::-moz-selection {
  background-color: #ffecb3;
  color: #e65100;
}

六、选择器的优先级

当多个选择器匹配同一个元素时，CSS 通过"优先级规则"决定哪个样式最终生效。优先级的计算基于选择器的类型，具体规则如下：

1. 优先级权重

不同类型的选择器有不同的权重值，权重越高，优先级越高：

内联样式 （style 属性）：权重最高（1000）。
ID 选择器：权重为 100。
类选择器、伪类选择器、属性选择器：权重为 10。
标签选择器、伪元素选择器：权重为 1。
通配符选择器：权重为 0。

2. 计算规则

优先级通过"权重累加"计算，例如：
- #header .nav a：1 个 ID 选择器（100） + 1 个类选择器（10） + 1 个标签选择器（1） → 总权重 111。
- div.nav ul li：1 个类选择器（10） + 3 个标签选择器（3） → 总权重 13。
权重高的选择器样式优先生效；权重相同则后定义的样式覆盖先定义的样式。
!important 声明可强制提升样式优先级（如 color: red !important;），但应尽量避免使用，以免破坏优先级规则。

示例：

复制代码

/* 权重：10（类选择器） */
.title {
  color: blue;
}

/* 权重：100（ID 选择器） → 优先级更高 */
#main-title {
  color: red;
}

/* 权重：10（类） + 1（标签）= 11 → 比单独的 .title 优先级高 */
h1.title {
  color: green;
}

对应 HTML：

复制代码

<h1 id="main-title" class="title">标题文字</h1> <!-- 最终颜色为 red -->

七、选择器的最佳实践

优先使用类选择器：类选择器复用性高、权重适中，是平衡精准度和灵活性的最佳选择。
避免过度嵌套 ：后代选择器嵌套层级越多（如 div ul li a span），权重计算越复杂，且影响性能，建议嵌套不超过 3 层。
减少 ID 选择器使用：ID 选择器权重高且不可复用，过多使用会导致样式难以覆盖和维护。
合理使用伪类和伪元素 ：利用 :hover 增强交互体验，用 ::before/::after 添加装饰性内容，减少不必要的 HTML 冗余。
利用群组选择器减少重复：将相同样式的选择器合并为群组，精简代码。
语义化命名 ：类名和 ID 名应反映元素的功能（如 .nav、.sidebar），而非样式（如 .red、.big），提高代码可读性。

八、总结

CSS 选择器是样式控制的"导航系统"，从基础的标签选择器到复杂的伪类、伪元素选择器，每种选择器都有其独特的应用场景。掌握选择器的核心在于理解"如何精准匹配目标元素"------无论是单个元素、一类元素，还是满足特定状态或位置的元素，都能通过合适的选择器实现精准定位。

选择器的优先级规则是避免样式冲突的关键，合理规划选择器类型和层级，能有效减少样式覆盖问题。在实际开发中，应根据需求选择最简洁、最高效的选择器，平衡精准度、复用性和代码可维护性。

≡