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

前言

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

一、CSS 选择器是什么？------ 样式的 "导航定位系统"

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

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

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

css 复制代码

/* 选择器：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 标签名作为选择器，能选中页面中所有该类型的标签。

语法：

css 复制代码

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

2.1.2 实战代码样例

html 复制代码

<!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 常见误区

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

html 复制代码

<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 复制代码

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

html 复制代码

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

2.2.2 基础实战样例

html 复制代码

<!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）一个元素可以绑定多个类：多个类名用空格分隔，这样能复用多个类的样式，减少代码冗余。例如：

html 复制代码

<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）类选择器的优先级：类选择器优先级高于标签选择器。如果一个元素同时被标签选择器和类选择器选中，且样式冲突，会优先应用类选择器的样式。例如：

html 复制代码

<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 复制代码

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

html 复制代码

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

2.3.2 实战代码样例

html 复制代码

<!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 定义与语法

语法：

css 复制代码

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

2.4.2 实战代码样例

html 复制代码

<!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 定义与语法

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

语法：

css 复制代码

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

3.1.2 基础实战样例

html 复制代码

<!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）选中深层后代元素：后代选择器可以嵌套多层，选中更深层次的元素。例如：

html 复制代码

<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 选择器，实现更精准的选择。例如：

html 复制代码

<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 定义与语法

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

语法：

css 复制代码

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

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

html 复制代码

<!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 常见应用场景

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

html 复制代码

<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 定义与语法

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

语法：

css 复制代码

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

注意：

逗号前后可以有空格（推荐），也可以没有；

为了可读性，建议每个选择器单独一行（尤其是选择器较多时）；

最后一个选择器后面不能加逗号。

3.3.2 实战代码样例

html 复制代码

<!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）需要统一样式：

css 复制代码

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：链接被鼠标按下但未弹起的状态（活动状态）。

语法与实战样例

html 复制代码

<!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样式（最常用、最直观）：

css 复制代码

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

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

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

语法与实战样例

html 复制代码

<!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 优先级实战示例

html 复制代码

<!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 分。

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

示例：

css 复制代码

/* 标签选择器：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，且优先级更高）。

示例：

css 复制代码

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

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

总结

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

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

目录

前言

一、CSS 选择器是什么？------ 样式的 "导航定位系统"

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

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

1.3 选择器的分类逻辑

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

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

2.1.1 定义与语法

2.1.2 实战代码样例

2.1.3 核心特点

2.1.4 常见误区

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

2.2.1 定义与语法

2.2.2 基础实战样例

2.2.3 语法细节与高级用法

2.2.4 核心特点

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

2.3.1 定义与语法

2.3.2 实战代码样例

2.3.3 与类选择器的核心区别

2.3.4 常见误区

2.3.5 核心特点

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

2.4.1 定义与语法

2.4.2 实战代码样例

2.4.3 核心用途

2.4.4 核心特点

2.5 基础选择器小结

三、复合选择器：选择器的 "组合拳"

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

3.1.1 定义与语法

3.1.2 基础实战样例

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

3.1.4 核心特点

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

3.2.1 定义与语法

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

3.2.3 常见应用场景

3.2.4 核心特点

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

3.3.1 定义与语法

3.3.2 实战代码样例

3.3.3 核心用途与优势

3.3.4 核心特点

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

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

语法与实战样例

关键注意事项

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

语法与实战样例

核心用途

3.4.3 伪类选择器核心特点

3.5 复合选择器小结

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

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

4.2 优先级实战示例

4.3 优先级叠加计算

4.4 优先级技巧：!important

总结

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