CSS 选择器详解
你想要系统掌握 CSS 选择器的相关知识，CSS 选择器是精准定位 HTML 页面中需要设置样式的元素的核心工具，也是实现样式复用、精准样式控制的基础。下面将从基础到常用进阶，全面讲解 CSS 选择器的分类、语法和使用场景。
一、CSS 选择器核心作用
CSS 选择器的唯一核心目的：从 HTML 页面的众多元素中，筛选出目标元素，为其应用预设的 CSS 样式。
简单来说，就是 “找到元素，再美化元素”，没有选择器，CSS 样式就无法精准绑定到目标 HTML 元素上。
二、基础选择器（4 种，入门必备）
基础选择器是 CSS 选择器的基石，语法简单，覆盖大部分基础开发场景，也是你后续学习复杂选择器的基础。

1. 元素选择器（标签选择器）
   语法：直接使用 HTML 标签名作为选择器（如 p、div、h1、span、body）。
   作用：选中页面中所有该类型的 HTML 标签，实现批量样式设置。
   特点：匹配范围广，无法精准选中单个元素，适合给同一类标签设置统一默认样式。
   示例：
   css
   / 选中页面中所有

   标签，设置文字颜色和行高 /
   p {
   color: #333;
   line-height: 1.8;
   }

/ 选中页面中所有

标题标签，设置居中对齐 /
h1 {
text-align: center;
color: #2f5496;
}

1. 类选择器（最常用，灵活度最高）
   语法：以英文句点 . 开头，后面跟随自定义的类名（如 .box、.text-red、.auto-wrap）。
   作用：选中页面中所有带有该类名的 HTML 元素（无论元素标签类型是什么）。
   特点：
   样式可复用：同一个类选择器可以绑定到多个不同的 HTML 元素上，共享相同样式；
   灵活度高：一个 HTML 元素可以通过 class 属性绑定多个类名（类名之间用空格分隔）。
   使用方式：HTML 元素通过 class 属性绑定类名，与类选择器对应。
   示例：
   css
   / 类选择器：选中所有 class="text-red" 的元素 /
   .text-red {
   color: #ff4400;
   }

/ 类选择器：选中所有 class="container" 的元素 /
.container {
width: 1200px;
margin: 0 auto; / 左右居中 /
padding: 0 15px;
}
html
预览

这段文本是红色的

1. ID 选择器（唯一标识，精准选中单个元素）
   语法：以英文井号 # 开头，后面跟随自定义的 ID 名（如 #header、#footer、#content）。
   作用：选中页面中唯一带有该 ID 名的 HTML 元素（HTML 规范要求：单个页面中 ID 名必须唯一，不能重复）。
   特点：匹配范围唯一，优先级高于类选择器和元素选择器，适合选中页面中独一无二的元素（如网站头部、底部、核心内容区）。
   使用方式：HTML 元素通过 id 属性绑定 ID 名，与 ID 选择器对应，一个元素只能绑定一个 ID 名。
   示例：
   css
   / ID选择器：选中 id="header" 的唯一元素 /

   header {

   height: 80px;
   background-color: #222;
   color: #fff;
   }
   html
   预览
   网站头部（导航、Logo等）
2. 通配符选择器（全选所有元素）
   语法：使用英文星号 作为选择器。
   作用：选中页面中所有的 HTML 元素（包括

• {
  margin: 0;
  padding: 0;
  / 可选：统一盒模型计算方式 /
  box-sizing: border-box;
  }
  三、常用进阶选择器（组合 / 复合选择器，提升精准度）
  基础选择器往往无法满足复杂页面的精准筛选需求，进阶选择器通过组合基础选择器，实现更精细的元素定位，以下是开发中最常用的几种。

1. 后代选择器（包含选择器，空格分隔）
   语法：两个或多个选择器之间用空格分隔（如 父选择器 子选择器、div .text、#header ul li）。
   作用：选中某个父元素下的所有后代元素（包括直接子元素、孙子元素、曾孙元素等，层级不限）。
   特点：层级清晰，适合筛选嵌套结构中的元素。
   示例：
   css
   / 选中 id="nav" 元素下的所有 标签（无论层级多深） /

   nav a {

   text-decoration: none; / 清除下划线 /
   color: #333;
   }

/ 选中 .container 类下的所有

标签 /
.container p {
font-size: 14px;
color: #666;
}
html
预览

1. 子选择器（直接子元素，> 分隔）
   语法：两个选择器之间用大于号 > 分隔（如 父选择器 > 子选择器、div > .box、#header > ul）。
   作用：选中某个父元素下的直接子元素（仅一级层级，不包含孙子元素及更深层级）。
   特点：精准筛选直接子元素，避免影响深层级元素，优先级高于后代选择器。
   示例：
   css
   / 仅选中 .box 类下的直接子元素 （不包含孙子元素的） /
   .box > span {
   color: red;
   }
   html
   预览
   
   这个span会被选中（直接子元素）
   

   
   这个span不会被选中（孙子元素）
   

   
   
2. 类选择器叠加（多类选择器，无分隔）
   语法：多个类选择器直接连接（无分隔符，如 .class1.class2、.box.text-center）。
   作用：选中同时拥有这多个类名的 HTML 元素（必须同时满足所有类名条件，顺序不限）。
   特点：进一步缩小筛选范围，实现更精准的样式控制，不影响单个类名的样式复用。
   示例：
   css
   / 选中同时拥有 .box 和 .highlight 两个类名的元素 /
   .box.highlight {
   border: 2px solid #ffd700;
   background-color: #fff8dc;
   }
   html
   预览
   这个盒子有高亮样式
   
   
   
   这个盒子没有高亮样式
3. 相邻兄弟选择器（+ 分隔）
   语法：两个选择器之间用加号 + 分隔（如 选择器1 + 选择器2、h2 + p）。
   作用：选中紧挨着选择器 1 之后的、同层级的选择器 2 元素（仅相邻的下一个兄弟元素）。
   示例：
   css
   / 选中紧挨着

   标签之后的同层级

   标签 /
   h2 + p {
   margin-top: 10px;
   color: #ff4400;
   }
   html
   预览
   

   文章标题

   
   

   这段文本会被选中（紧挨着h2的下一个兄弟）

   
   

   这段文本不会被选中（不紧邻h2）

   
   四、选择器优先级（核心规则：谁更 “精准”，谁生效）
   当同一个 HTML 元素被多个不同选择器设置的样式冲突时，不会随机生效，而是遵循优先级规则，优先级高的样式会覆盖优先级低的样式。
   核心优先级排序（从高到低）
   ID 选择器 > 类选择器（含多类选择器） > 元素选择器 > 通配符选择器
   补充规则
   行内样式（HTML 元素的 style 属性）优先级高于所有选择器（最 “就近”，最精准）；
   后代 / 子选择器的优先级：由组成它的基础选择器优先级叠加而成（如 #header .nav a 的优先级 = ID 选择器 > 类选择器 > 元素选择器）；
   样式后写不覆盖高优先级：即使后面写的样式，若优先级低于前面，也无法覆盖（如 ID 选择器样式写在类选择器前面，仍会覆盖类选择器样式）；
   特殊：!important 可以强制提升单个样式的优先级（慎用，会破坏优先级规则，难以维护）。
   示例（优先级直观体现）
   css
   / ID选择器（高优先级） /

   demo {

   color: red;
   }

/ 类选择器（中优先级） /
.demo-box {
color: blue;
}

/ 元素选择器（低优先级） /
div {
color: green;
}
html
预览