【前端开发之CSS】（二）CSS 选择器终极指南：从基础到进阶，精准拿捏页面元素！

_OP_CHEN

发布于 2026-01-25 09:27:27

1340

文章被收录于专栏：C++C++

前言

在 CSS 的世界里，选择器就像一把 “精准定位的手术刀”，能帮你从复杂的 HTML 结构中快速锁定目标元素，再施加样式魔法。无论是给所有段落改颜色，还是给某个特定按钮加特效，都离不开选择器的 “指引”。如果你还在为 “怎么选中想要的元素” 而头疼，这篇文章将带你全面解锁 CSS 选择器的奥秘 —— 从基础选择器到复合选择器，用通俗的语言与生动类比，让你彻底掌握选择器的用法，写 CSS 再也不用 “盲猜”！下面就让我们正式开始吧！

一、CSS 选择器是什么？—— 样式的 “导航定位系统”

1.1 核心功能：精准选中目标元素

CSS 选择器的核心作用只有一个：从 HTML 文档中选中一个或多个特定的元素，然后将 CSS 样式应用到这些元素上。就像在游戏（比如 SC2、War3）中，你需要先选中单位才能下达指令一样，写 CSS 也必须先 “选中” 元素，才能给它设置颜色、大小、布局等样式。

举个简单的例子：如果想让页面中所有的<p>标签文字变成红色，就需要用选择器先 “选中” 所有<p>标签，再设置颜色样式：

/* 选择器：p（选中所有<p>标签） */
p {
  color: red; /* 给选中的元素设置红色文字 */
}

没有选择器，CSS 样式就像 “无的放矢”，不知道该作用于哪个元素；而有了选择器，你就能精准控制页面中任意元素的样式，实现 “指哪打哪” 的效果。

1.2 为什么选择器如此重要？

样式精准化：避免样式 “泛滥”—— 比如只想让导航栏的文字加粗，而不是所有文字都加粗；
代码复用性：通过选择器批量选中多个元素，一次性应用样式，减少重复代码；
结构与样式分离：无需修改 HTML 结构，仅通过选择器调整样式，符合 CSS 的核心设计思想；
灵活适配：不同场景下使用不同选择器，既能快速实现简单样式，也能应对复杂的页面结构。

1.3 选择器的分类逻辑

CSS 选择器的种类繁多，但核心可以分为两大类（基于 CSS2 标准，CSS3 在此基础上有扩展）：

基础选择器：由单个选择器构成，是选择器的 “基本单位”，包括标签选择器、类选择器、id 选择器、通配符选择器；
复合选择器：将多个基础选择器组合使用，能实现更复杂的选择逻辑，包括后代选择器、子选择器、并集选择器、伪类选择器。

接下来，我们就逐一拆解每一种选择器的用法、特点和实战场景，让你看完就能直接上手用！这里也为大家分享一个CSS选择器的参考手册：CSS选择器参考手册

二、基础选择器：选择器的 “四大金刚”

基础选择器是 CSS 选择器的基石，用法简单、场景广泛，是新手必须掌握的核心内容。就像盖房子需要砖头、水泥这些基础材料一样，写 CSS 也离不开基础选择器。

2.1 标签选择器：“一呼百应” 选中同类元素

2.1.1 定义与语法

标签选择器（也叫元素选择器）是最基础的选择器，它直接使用 HTML 标签名作为选择器，能选中页面中所有该类型的标签。

语法：

/* 标签名 { 样式声明 } */
标签名 {
  属性1: 值1;
  属性2: 值2;
}

2.1.2 实战代码样例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签选择器示例</title>
  <style>
    /* 选中所有<p>标签，设置文字为红色、字号20px */
    p {
      color: red;
      font-size: 20px;
    }
    /* 选中所有<div>标签，设置文字为绿色、字号18px */
    div {
      color: green;
      font-size: 18px;
    }
    /* 选中所有<h3>标签，设置文字居中、下划线 */
    h3 {
      text-align: center;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h3>标签选择器演示</h3>
  <p>咬人猫</p>
  <p>咬人猫</p>
  <p>咬人猫</p>
  <div>阿叶君</div>
  <div>阿叶君</div>
  <div>阿叶君</div>
</body>
</html>

运行效果：所有<p>标签文字变红、20px；所有<div>标签文字变绿、18px；<h3>标签文字居中且带下划线。

2.1.3 核心特点

优点：简单直接，书写方便，能快速选中同一类型的所有元素，适合批量设置样式；
缺点：无法差异化选择 —— 比如想让某个<p>标签文字为蓝色，其他<p>标签为红色，标签选择器就做不到；
适用场景：页面中同一类型元素需要统一样式时（如所有标题、所有段落、所有列表）。

2.1.4 常见误区

不要误以为标签选择器只能选中 “纯标签”，它能选中页面中所有该标签的元素，无论嵌套多深。例如：

<div>
  <p>嵌套在div中的p标签</p>
  <div>
    <p>嵌套在两层div中的p标签</p>
  </div>
</div>

上面两个<p>标签都会被p { color: red; }选中，文字变成红色。

2.2 类选择器：“灵活定制” 选中任意元素

类选择器是 CSS 中最常用、最灵活的选择器，它允许你为元素自定义 “类别”，然后通过类名选中特定元素。就像给元素贴 “标签”，想选哪个就选哪个，还能让多个元素共用一个类。

2.2.1 定义与语法

第一步：在 CSS 中，类选择器以.（英文句点）开头，后面跟自定义的类名；
第二步：在 HTML 中，通过class属性给元素绑定对应的类名（类名前不加.）。

语法：

/* CSS中：.类名 { 样式声明 } */
.类名 {
  属性1: 值1;
  属性2: 值2;
}

<!-- HTML中：<标签 class="类名"> -->
<标签 class="类名">内容</标签>

2.2.2 基础实战样例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类选择器基础示例</title>
  <style>
    /* 定义一个名为blue的类，设置文字为蓝色 */
    .blue {
      color: blue;
      font-weight: bold;
    }
    /* 定义一个名为bg-gray的类，设置背景为灰色 */
    .bg-gray {
      background-color: #f5f5f5;
      padding: 10px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="blue">咬人猫（蓝色文字+加粗）</div>
  <div>咬人猫（默认样式）</div>
  <p class="blue bg-gray">这是一个同时拥有blue和bg-gray类的段落</p>
  <span class="bg-gray">这是一个拥有bg-gray类的span标签</span>
</body>
</html>

运行效果：

第一个<div>文字蓝色加粗；
第三个<p>文字蓝色加粗，且背景灰色、带内边距和圆角；
最后一个<span>背景灰色、带内边距和圆角。

2.2.3 语法细节与高级用法

（1）一个元素可以绑定多个类：多个类名用空格分隔，这样能复用多个类的样式，减少代码冗余。例如：

<style>
  .box {
    width: 200px;
    height: 150px;
    border: 1px solid #ccc;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
</style>
<!-- 同时绑定box和red类，既有盒子样式，又有红色背景 -->
<div class="box red"></div>
<!-- 同时绑定box和green类，既有盒子样式，又有绿色背景 -->
<div class="box green"></div>
<!-- 重复使用box和red类 -->
<div class="box red"></div>

（2）类名命名规范：

类名可以包含字母、数字、连字符（-），但不能以数字或连字符开头；
不建议使用中文、标签名（如div、p）作为类名；
长类名建议用连字符（-）分隔，增强可读性（如header-nav、btn-primary）；
类名要语义化，根据功能命名（如bg-red表示红色背景，text-center表示文字居中），而不是根据样式命名（如red、big）。

（3）类选择器的优先级：类选择器优先级高于标签选择器。如果一个元素同时被标签选择器和类选择器选中，且样式冲突，会优先应用类选择器的样式。例如：

<style>
  p {
    color: red; /* 标签选择器：红色 */
  }
  .blue {
    color: blue; /* 类选择器：蓝色 */
  }
</style>
<p class="blue">这段文字会是蓝色（类选择器优先级更高）</p>

2.2.4 核心特点

优点：灵活性极高，可按需选中任意元素；支持多类绑定，样式复用性强；优先级高于标签选择器，能覆盖默认样式；
缺点：需要手动给元素绑定类名，略显繁琐（但相比于灵活性，这不算缺点）；
适用场景：需要差异化设置样式、多个元素共用同一套样式、复杂页面中精准选中特定元素（实际开发中最常用）。

2.3 id 选择器：“独一无二” 选中单个元素

id 选择器和类选择器类似，但它强调 “唯一性”—— 一个 id 在整个 HTML 文档中只能使用一次，对应的 id 选择器只能选中一个元素。就像身份证号码，每个人只有一个，通过身份证号码能精准找到某个人。

2.3.1 定义与语法

第一步：在 CSS 中，id 选择器以#（英文井号）开头，后面跟自定义的 id 值；
第二步：在 HTML 中，通过id属性给元素绑定对应的 id 值（id 值前不加#）。

语法：

/* CSS中：#id值 { 样式声明 } */
#id值 {
  属性1: 值1;
  属性2: 值2;
}

<!-- HTML中：<标签 id="id值"> -->
<标签 id="id值">内容</标签>

2.3.2 实战代码样例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>id选择器示例</title>
  <style>
    /* 定义id为ha的选择器，设置文字红色、字号24px、居中 */
    #ha {
      color: red;
      font-size: 24px;
      text-align: center;
      background-color: #f0f0f0;
      padding: 15px;
    }
    /* 定义id为header的选择器，设置背景黑色、文字白色 */
    #header {
      background-color: #000;
      color: #fff;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="header">这是页面头部（唯一id：header）</div>
  <div id="ha">蛤蛤蛤（唯一id：ha）</div>
  <!-- 错误：id不能重复，下面这个div的id="ha"是无效的 -->
  <div id="ha">重复的id，样式不会生效</div>
</body>
</html>

运行效果：

第一个<div>（id="header"）背景黑色、文字白色、居中；
第二个<div>（id="ha"）文字红色、24px、居中、灰色背景；
第三个<div>虽然 id="ha"，但由于 id 重复，样式不会生效（浏览器只会识别第一个 id="ha" 的元素）。

2.3.3 与类选择器的核心区别

特性	id 选择器	类选择器
唯一性	一个 id 只能在页面中使用一次	一个类可以在页面中使用多次
选中元素数量	只能选中一个元素	可以选中多个元素
语法符号	以#开头	以.开头
优先级	更高（高于类选择器）	低于 id 选择器
适用场景	选中页面中唯一的元素（如头部、底部、轮播图）	选中多个需要相同样式的元素

2.3.4 常见误区

不要重复使用 id：即使重复绑定，浏览器也只会对第一个拥有该 id 的元素应用样式，后续元素不会生效；
不要过度使用 id 选择器：id 选择器优先级高，后续难以用其他选择器覆盖样式，不利于样式维护；
避免用 id 选择器做样式复用：id 的唯一性决定了它不适合复用，复用样式请用类选择器。

2.3.5 核心特点

优点：优先级高，能精准选中唯一元素，适合设置页面中独一无二的组件样式；
缺点：不能重复使用，样式复用性差，优先级过高不利于样式维护；
适用场景：页面中唯一的元素（如头部header、底部footer、轮播图carousel、登录按钮login-btn等）。

2.4 通配符选择器：“一网打尽” 选中所有元素

通配符选择器用*（英文星号）表示，它能选中页面中所有的 HTML 元素，包括<html>、<body>、<p>、<div>等所有标签。就像 “撒网捕鱼”，一次性把所有元素都网进来。

2.4.1 定义与语法

语法：

/* * { 样式声明 } */
* {
  属性1: 值1;
  属性2: 值2;
}

2.4.2 实战代码样例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通配符选择器示例</title>
  <style>
    /* 选中所有元素，设置margin和padding为0，清除默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 给body设置背景色，方便观察 */
    body {
      background-color: #f5f5f5;
    }
    /* 通配符选择器的样式会被其他选择器覆盖 */
    p {
      color: red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <h3>通配符选择器演示</h3>
  <p>这是一个段落，margin被设置为10px（覆盖通配符的0）</p>
  <div>这是一个div，默认没有margin和padding</div>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</body>
</html>

运行效果：

所有元素的默认margin和padding被清除（避免浏览器默认样式导致的布局混乱）；
<p>标签的margin被覆盖为 10px，文字为红色（其他选择器优先级高于通配符选择器）。

2.4.3 核心用途

通配符选择器最常用的场景是清除浏览器默认样式。不同浏览器会给元素（如<body>、<ul>、<p>）设置默认的margin和padding，导致页面在不同浏览器中显示不一致。使用通配符选择器可以快速清除这些默认样式，为后续布局打下基础。

除了清除默认样式，通配符选择器也可用于设置所有元素的公共样式（如字体、颜色），但实际开发中很少这样用（会影响性能，且不够灵活）。

2.4.4 核心特点

优点：简单粗暴，能一次性选中所有元素，适合批量清除默认样式；
缺点：优先级最低，容易被其他选择器覆盖；选中所有元素会影响性能（页面元素越多，性能影响越明显）；
适用场景：清除浏览器默认样式（最核心用途）；设置所有元素的公共样式（慎用）。

2.5 基础选择器小结

选择器类型	语法	作用	核心特点	适用场景
标签选择器	标签名	选中所有相同标签	简单直接，无法差异化选择	同一类型元素统一样式
类选择器	. 类名	选中绑定该类的元素	灵活度高，支持多类绑定，样式复用性强	差异化样式、多元素共用样式（最常用）
id 选择器	#id 值	选中绑定该 id 的元素	唯一性强，优先级高，不能重复使用	页面中唯一的元素（如头部、底部）
通配符选择器	*	选中所有元素	范围广，优先级最低，可能影响性能	清除浏览器默认样式（核心用途）

三、复合选择器：选择器的 “组合拳”

基础选择器虽然好用，但面对复杂的 HTML 结构（如嵌套元素、多个类型元素需要统一样式）时，就显得力不从心了。这时候，复合选择器就派上用场了 —— 它将多个基础选择器组合起来，实现更精准、更复杂的选择逻辑。

3.1 后代选择器：“子子孙孙” 都能选中

后代选择器（也叫包含选择器）用于选中某个父元素内部所有的子元素（包括直接子元素、孙子元素、曾孙子元素等所有后代）。就像 “家族筛选”，选中某个家族中所有符合条件的成员，不管是儿子、孙子还是曾孙子。

3.1.1 定义与语法

后代选择器由多个基础选择器组成，选择器之间用空格分隔。前面的选择器是 “父元素”，后面的选择器是 “后代元素”，最终选中的是父元素内部的后代元素。

语法：

/* 父元素选择器 后代元素选择器 { 样式声明 } */
父元素选择器 后代元素选择器 {
  属性1: 值1;
  属性2: 值2;
}

3.1.2 基础实战样例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器基础示例</title>
  <style>
    /* 选中ol标签内部所有的li标签，设置文字为红色 */
    ol li {
      color: red;
      font-size: 18px;
    }
    /* 选中ul标签内部所有的li标签，设置文字为绿色 */
    ul li {
      color: green;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h3>后代选择器演示：不同列表的li样式不同</h3>
  <ul>
    <li>aaa（ul的li，绿色）</li>
    <li>bbb（ul的li，绿色）</li>
    <li>ccc（ul的li，绿色）</li>
  </ul>
  <ol>
    <li>ddd（ol的li，红色）</li>
    <li>eee（ol的li，红色）</li>
    <li>fff（ol的li，红色）</li>
  </ol>
</body>
</html>

运行效果：ul内部的li文字绿色、16px；ol内部的li文字红色、18px—— 通过父元素（ul/ol）区分，实现了对不同li的差异化选择。

3.1.3 高级用法：嵌套后代与多选择器组合

（1）选中深层后代元素：后代选择器可以嵌套多层，选中更深层次的元素。例如：

<style>
  /* 选中ul内部li标签中的a标签，设置文字为黄色 */
  ul li a {
    color: yellow;
    text-decoration: none;
  }
  /* 简化写法：只要a标签是ul的后代，不管嵌套多深都能选中 */
  ul a {
    color: yellow;
    text-decoration: none;
  }
</style>
<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li><a href="#">ccc（ul的后代a标签，黄色）</a></li>
  <li>
    <div>
      <a href="#">ddd（ul的深层后代a标签，黄色）</a>
    </div>
  </li>
</ul>

运行效果：

（2）结合类选择器 /id 选择器：后代选择器可以结合类选择器、id 选择器，实现更精准的选择。例如：

<style>
  /* 选中类名为one的ol标签内部li标签中的a标签，设置文字为绿色 */
  .one li a {
    color: green;
    font-weight: bold;
  }
  /* 选中id为nav的div标签内部所有a标签，设置文字为黑色 */
  #nav a {
    color: black;
    margin: 0 10px;
  }
</style>
<ol class="one">
  <li>ddd</li>
  <li>eee</li>
  <li><a href="#">fff（绿色、加粗）</a></li>
  <li><a href="#">fff（绿色、加粗）</a></li>
</ol>
<div id="nav">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <div>
    <a href="#">联系我们</a>
  </div>
</div>

运行效果：

3.1.4 核心特点

优点：能精准选中父元素内部的所有后代元素，支持多层嵌套和多选择器组合，灵活性高；
缺点：选择范围较广，可能会选中不需要的深层后代元素；
适用场景：需要选中某个容器内部所有符合条件的元素（无论嵌套多深）。

3.2 子选择器：“只认亲儿子” 不选孙子

子选择器和后代选择器类似，但它更 “挑剔”—— 只选中父元素的直接子元素（即 “亲儿子”），不包括孙子元素、曾孙子元素等深层后代。就像 “亲子鉴定”，只认直接的子女，不认隔代的后代。

3.2.1 定义与语法

子选择器由多个基础选择器组成，选择器之间用 **>**（英文大于号）分隔。前面的选择器是 “父元素”，后面的选择器是 “直接子元素”，最终选中的是父元素的直接子元素。

语法：

/* 父元素选择器 > 直接子元素选择器 { 样式声明 } */
父元素选择器 > 直接子元素选择器 {
  属性1: 值1;
  属性2: 值2;
}

3.2.2 实战代码样例：与后代选择器对比

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子选择器vs后代选择器</title>
  <style>
    /* 后代选择器：选中.two内部所有a标签（包括直接子元素和深层后代） */
    .two a {
      color: red;
      font-size: 18px;
    }
    /* 子选择器：只选中.two的直接子元素a标签（不包括深层后代） */
    .two > a {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="two">
    <a href="#">链接1（.two的直接子元素，蓝色、加粗）</a>
    <p><a href="#">链接2（.two的孙子元素，红色）</a></p>
  </div>
</body>
</html>

运行效果：

链接 1 是.two的直接子元素，被子选择器选中，文字蓝色、加粗；
链接 2 是.two的孙子元素（嵌套在<p>标签中），被后代选择器选中，文字红色、18px。

3.2.3 常见应用场景

子选择器常用于需要精准控制 “直接子元素” 样式的场景，例如导航栏：

<style>
  /* 导航栏容器 */
  .nav {
    display: flex;
    background-color: #000;
    height: 60px;
    line-height: 60px;
  }
  /* 只选中.nav的直接子元素a标签（导航项），设置样式 */
  .nav > a {
    color: #fff;
    text-decoration: none;
    padding: 0 20px;
  }
  /* 导航项 hover 效果 */
  .nav > a:hover {
    background-color: #333;
  }
</style>
<div class="nav">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">服务</a>
  <div>
    <a href="#">关于我们（不会被选中，不是直接子元素）</a>
  </div>
</div>

运行效果如下：

3.2.4 核心特点

优点：选择范围更精准，只选中直接子元素，不会误选深层后代；
缺点：灵活性低于后代选择器，不能选中深层后代；
适用场景：需要只选中父元素的直接子元素，不需要深层后代的场景（如导航栏、菜单列表）。

3.3 并集选择器：“集体点名” 选中多组元素

并集选择器用于同时选中多组元素，给它们应用相同的样式。就像 “集体点名”，一次性叫多个名字，让它们执行同一个指令，能极大减少重复代码。

3.3.1 定义与语法

并集选择器由多个选择器组成，选择器之间用逗号（,）分隔。可以是基础选择器、后代选择器、子选择器等任意类型的选择器。

语法：

/* 选择器1, 选择器2, 选择器3 { 样式声明 } */
选择器1,
选择器2,
选择器3 {
  属性1: 值1;
  属性2: 值2;
}

注意：

逗号前后可以有空格（推荐），也可以没有；
为了可读性，建议每个选择器单独一行（尤其是选择器较多时）；
最后一个选择器后面不能加逗号。

3.3.2 实战代码样例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>并集选择器示例</title>
  <style>
    /* 选中div和h3标签，设置文字红色 */
    div, h3 {
      color: red;
    }
    /* 选中ul的li、.box类、#footer id，设置文字居中、行高1.5 */
    ul > li,
    .box,
    #footer {
      text-align: center;
      line-height: 1.5;
      background-color: #f5f5f5;
      padding: 10px;
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <h3>并集选择器演示</h3>
  <div>这是div标签（红色文字）</div>
  <ul>
    <li>ul的li标签（居中、灰色背景）</li>
    <li>ul的li标签（居中、灰色背景）</li>
  </ul>
  <div class="box">这是.box类的元素（居中、灰色背景）</div>
  <div id="footer">这是#footer id的元素（居中、灰色背景）</div>
</body>
</html>

运行效果：

div和h3标签文字红色；
ul的li、.box类元素、#footer id 元素都具有居中、灰色背景、内边距和外边距样式。

3.3.3 核心用途与优势

并集选择器的核心用途是代码复用—— 当多个不同的元素需要应用相同的样式时，无需重复编写多个选择器，只需用并集选择器将它们组合起来，一次性设置样式。

例如，页面中所有标题（h1-h6）需要统一样式：

h1, h2, h3, h4, h5, h6 {
  color: #333;
  font-weight: bold;
  margin: 10px 0;
}

3.3.4 核心特点

优点：减少重复代码，提高开发效率；支持任意类型的选择器组合，灵活性高；
缺点：如果选择器过多，可能会降低代码可读性（建议分组排版，每个选择器单独一行）；
适用场景：多个不同元素需要应用相同样式的场景（如统一标题样式、统一按钮样式、统一列表样式）。

3.4 伪类选择器：“状态切换” 选中特殊状态的元素

伪类选择器用于选中元素的特殊状态（如未访问的链接、鼠标悬停的元素、获取焦点的输入框等），它不是基于元素的结构，而是基于元素的状态来选择。就像 “情景筛选”，根据元素的当前状态（如是否被点击、是否有焦点）来应用样式。

伪类选择器的语法是在选择器后面加:（英文冒号），再跟伪类名称（如:hover、:link、:focus）。下面重点介绍最常用的两种伪类选择器：链接伪类选择器和:focus伪类选择器。

3.4.1 链接伪类选择器：控制链接的四种状态

链接伪类选择器专门用于控制<a>标签的四种状态，分别是：

a:link：未被访问过的链接；
a:visited：已经被访问过的链接；
a:hover：鼠标指针悬停在链接上的状态；
a:active：链接被鼠标按下但未弹起的状态（活动状态）。

语法与实战样例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>链接伪类选择器示例</title>
  <style>
    /* 1. 未被访问的链接：黑色、无下划线 */
    a:link {
      color: black;
      text-decoration: none;
      font-size: 18px;
    }
    /* 2. 已被访问的链接：绿色、无下划线 */
    a:visited {
      color: green;
      text-decoration: none;
    }
    /* 3. 鼠标悬停的链接：红色、下划线 */
    a:hover {
      color: red;
      text-decoration: underline;
    }
    /* 4. 活动状态的链接：蓝色、粗体 */
    a:active {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h3>链接伪类选择器演示</h3>
  <a href="https://www.baidu.com">百度（点击前黑色，悬停红色，点击时蓝色，访问后绿色）</a>
  <br><br>
  <a href="https://www.google.com">谷歌（未访问时黑色，悬停红色）</a>
</body>
</html>

运行效果：

关键注意事项

书写顺序必须是 LVHA：link → visited → hover → active（记忆口诀：“绿化”—— 绿（link）、访（visited）、悬（hover）、按（active））。如果顺序颠倒，后面的伪类样式会被前面的覆盖，导致失效。例如，把hover写在link前面，hover样式会被link覆盖，鼠标悬停时不会生效。
a:visited的限制：为了保护用户隐私，a:visited只能设置color、background-color、border-color等少数样式，不能设置background-image、width、height等样式（浏览器会禁止这些可能泄露用户浏览记录的样式）。
恢复未访问状态：如果想让已访问的链接恢复成未访问状态，只需清空浏览器历史记录（快捷键：Ctrl+Shift+Delete）。
实际开发简化用法：实际开发中，很少同时设置四种状态，通常只设置默认样式和hover样式（最常用、最直观）：

a {
  color: black;
  text-decoration: none;
}
a:hover {
  color: red;
  text-decoration: underline;
}

3.4.2 `:focus`伪类选择器：选中获取焦点的元素

:focus伪类选择器用于选中获取焦点的元素（如输入框被点击后、下拉框被选中后），最常用的场景是美化表单输入框。

语法与实战样例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>:focus伪类选择器示例</title>
  <style>
    /* 所有input标签的默认样式 */
    input {
      width: 300px;
      height: 40px;
      padding: 0 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }
    /* 获取焦点的input标签样式 */
    input:focus {
      color: red;
      border-color: red;
      outline: none; /* 清除默认的焦点轮廓线 */
      box-shadow: 0 0 5px rgba(255, 0, 0, 0.3); /* 添加红色阴影 */
    }
    /* 文本域获取焦点的样式 */
    textarea:focus {
      border-color: blue;
      outline: none;
      box-shadow: 0 0 5px rgba(0, 0, 255, 0.3);
    }
  </style>
</head>
<body>
  <h3>:focus伪类选择器演示</h3>
  <input type="text" placeholder="点击我获取焦点，文字变红色">
  <br>
  <input type="password" placeholder="密码输入框，焦点时红色边框">
  <br>
  <textarea cols="30" rows="5" placeholder="文本域，焦点时蓝色边框"></textarea>
</body>
</html>

运行效果：

输入框未获取焦点时，灰色边框、默认样式；
点击输入框获取焦点后，文字变红、红色边框、红色阴影；
文本域获取焦点后，蓝色边框、蓝色阴影。

核心用途

:focus伪类选择器主要用于表单美化，通过改变获取焦点元素的样式，让用户清晰地知道当前正在操作哪个元素，提升用户体验。

3.4.3 伪类选择器核心特点

优点：能根据元素状态动态切换样式，提升用户体验；用法简单，无需修改 HTML 结构；
缺点：只针对元素的特定状态，适用场景相对单一；
适用场景：控制链接状态（link/visited/hover/active）、美化表单输入框（:focus）。

3.5 复合选择器小结

选择器类型	语法格式	作用	核心注意事项	适用场景
后代选择器	父选择器后代选择器	选中父元素内部所有后代元素	选择器之间用空格分隔，包括深层后代	容器内部所有符合条件的元素
子选择器	父选择器 > 子选择器	选中父元素的直接子元素	选择器之间用 > 分隔，只选直接子元素	只需要父元素的直接子元素，不含深层后代
并集选择器	选择器 1, 选择器 2, ...	同时选中多组元素，应用相同样式	选择器之间用逗号分隔，最后一个不加逗号	多个元素需要相同样式，减少重复代码
链接伪类选择器	a:link/a:visited/a:hover/a:active	控制链接的四种状态	必须按 LVHA 顺序书写，否则失效	链接样式美化，提升交互体验
:focus 伪类选择器	选择器:focus	选中获取焦点的元素	常用于表单元素，需清除默认 outline	表单美化，让用户明确当前操作元素

四、选择器优先级：谁的样式 “说了算”？

在实际开发中，一个元素可能会被多个选择器选中，当这些选择器设置的样式冲突时，浏览器会按照 “优先级” 来决定应用哪个样式。理解选择器优先级，能帮你避免样式 “失效” 的坑。

4.1 优先级规则（从高到低）

行内样式：通过元素的style属性设置的样式（优先级最高）；
id 选择器：单个 id 选择器的优先级高于类选择器、标签选择器；
类选择器 / 伪类选择器：类选择器、伪类选择器优先级高于标签选择器；
标签选择器：优先级低于上述三种；
通配符选择器：优先级最低（低于所有基础选择器和复合选择器）；
继承样式：元素从父元素继承的样式（优先级最低，任何显式设置的样式都会覆盖它）。

4.2 优先级实战示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器优先级示例</title>
  <style>
    /* 标签选择器：红色 */
    p {
      color: red;
    }
    /* 类选择器：蓝色（优先级高于标签选择器） */
    .blue {
      color: blue;
    }
    /* id选择器：绿色（优先级高于类选择器） */
    #green {
      color: green;
    }
    /* 通配符选择器：黑色（优先级最低，被覆盖） */
    * {
      color: black;
    }
  </style>
</head>
<body>
  <p>标签选择器：红色</p>
  <p class="blue">类选择器：蓝色（覆盖红色）</p>
  <p class="blue" id="green">id选择器：绿色（覆盖蓝色）</p>
  <p class="blue" id="green" style="color: orange;">行内样式：橙色（覆盖绿色）</p>
</body>
</html>

运行效果：

第一个<p>：红色（标签选择器）；
第二个<p>：蓝色（类选择器覆盖标签选择器）；
第三个<p>：绿色（id 选择器覆盖类选择器）；
第四个<p>：橙色（行内样式覆盖 id 选择器）。

4.3 优先级叠加计算

当复合选择器包含多个基础选择器时，优先级会叠加计算，计算规则如下：

行内样式：1000 分；
id 选择器：100 分 / 个；
类选择器 / 伪类选择器：10 分 / 个；
标签选择器：1 分 / 个；
通配符选择器：0 分。

总分越高，优先级越高；总分相同，后面定义的样式覆盖前面的样式。

示例：

/* 标签选择器：1分 */
p { color: red; }
/* 类选择器+标签选择器：10+1=11分 */
p.blue { color: blue; }
/* id选择器+类选择器+标签选择器：100+10+1=111分 */
p.blue#green { color: green; }
/* 后代选择器（标签+标签）：1+1=2分 */
div p { color: purple; }

4.4 优先级技巧：!important

如果想强制让某个样式生效，可以在样式声明后加!important，它会忽略优先级规则，强制应用该样式（除非其他样式也加了!important，且优先级更高）。

示例：

p {
  color: red !important; /* 强制生效 */
}
.blue {
  color: blue; /* 被覆盖 */
}

注意：尽量少用!important，它会破坏优先级规则，导致样式维护困难。只有在需要覆盖高优先级样式（如行内样式）且无法修改原有代码时，才考虑使用。

总结

CSS 选择器的世界看似复杂，但只要掌握了核心逻辑，就能灵活运用。希望本文能帮你打开 CSS 选择器的大门，在前端开发的道路上越走越远！如果在学习过程中有任何问题，欢迎在评论区留言讨论～

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-24，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！