CSS 选择器介绍-EW帮帮网

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

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

≡

CSS 选择器介绍

CSS 选择器

一、选择器的基本概念

二、基础选择器

1. 标签选择器（Type Selector）

2. 类选择器（Class Selector）

3. ID 选择器（ID Selector）

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

5. 属性选择器（Attribute Selector）

三、复合选择器

1. 后代选择器（Descendant Selector）

2. 子选择器（Child Selector）

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

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

5. 群组选择器（Group Selector）

四、伪类选择器

1. 状态伪类

2. 结构伪类

3. 表单伪类

五、伪元素选择器

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

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

3. `::selection`

六、选择器的优先级

1. 优先级权重

2. 计算规则

七、选择器的最佳实践

八、总结

网站公告

今日签到

热门文章

最新发布