CSS/LESS 选择器核心知识点

一、选择器中的空格：决定元素匹配关系的关键

选择器之间的空格并非格式问题，而是定义元素层级关系的核心符号：有空格=后代关系，无空格=交集关系。

1.1 类选择器间的空格对比

选择器语法	关系类型	含义（匹配目标）	示例 HTML（被选中元素标 ✅）
.classA .classB {}	后代选择器	匹配 .classA 所有后代（任意层级）中的 .classB	<div class="classA"><div class="classB">✅</div></div>
.classA.classB {}	交集选择器	匹配同时拥有 .classA 和 .classB 的同一元素	<div class="classA classB">✅</div>

1.2 LESS 中 & 与空格的关系

LESS 中的 & 代表“父选择器引用”，空格规则与原生 CSS 一致，最终编译结果由空格决定：

LESS 嵌套语法	编译后 CSS 语法	关系类型
.classA { &.classB {} }	.classA.classB {}	交集选择器
.classA { & .classB {} }	.classA .classB {}	后代选择器

二、> 直接子元素选择器：精准定位一级子元素

> 是直接子元素选择器，仅匹配“父元素的一级子元素”，不包含深层后代，与空格（后代选择器）形成精准度差异。

2.1 基本用法：> 与空格选择器的对比

选择器语法	匹配范围	示例 HTML（被选中元素标 ✅）
.parent > .child {}	仅 .parent 的一级子元素	<div class="parent"><div class="child">✅</div><div><div class="child">❌</div></div></div>
.parent .child {}	.parent 的所有后代	<div class="parent"><div class="child">✅</div><div><div class="child">✅</div></div></div>

2.2 关键疑问：> 前后是否必须有空格？

> 前后的空格不影响功能，仅影响可读性，推荐添加空格以避免混淆：

写法	语法合法性	可读性	推荐度	编译/解析结果
.parent > .child	合法	高	⭐⭐⭐⭐⭐	与无空格一致
.parent>.child	合法	低	⭐⭐	与有空格一致

2.3 > 与伪类的结合：精准筛选直接子元素

> 与伪类（结构性、状态伪类）结合，可实现“一级子元素+特定条件”的精准筛选，常见组合如下：

选择器语法	功能描述	示例场景
.parent > :first-child	匹配 .parent 第一个直接子元素	列表首项边框样式
.parent > :last-child	匹配 .parent 最后一个直接子元素	导航菜单最后一项去边框
.parent > :nth-child(odd)	匹配 .parent 奇数位置的直接子元素	表格奇数行背景色
.parent > p:first-of-type	匹配 .parent 第一个 <p> 直接子元素	文章首段加粗
.parent > .child:not(:last-child)	匹配 .parent 除最后一个外的 .child	列表项间添加分隔线

代码示例：导航菜单去最后一项边框

<ul class="menu">
  <li>首页</li>
  <li>分类</li>
  <li>关于</li> <!-- 无右边框 -->
</ul>

<style>
.menu > li:not(:last-child) {
  border-right: 1px solid #ddd;
}
</style>

三、伪类与选择器的组合：精细化样式控制

伪类（状态伪类：:hover/:focus；结构性伪类：:first-child/:nth-of-type）可与标签、class、ID 结合，满足不同场景的样式需求。

3.1 标签 + 伪类：按类型筛选元素

适用于“特定标签+结构/状态”的筛选，核心是“按标签类型精准定位”。

选择器语法	功能描述	注意事项
p:first-of-type	父元素中第一个 <p>	忽略其他类型元素，仅看 <p> 顺序
p:first-child	父元素中第一个子元素且为 <p>	若第一个子元素非 <p>，则不生效
img:nth-of-type(even)	父元素中偶数位置的 <img>	仅针对 <img> 标签排序

关键对比：匹配 .card 第一个 <p> 直接子元素

选择器语法	正确性	原因分析
.card > p:first-of-type	✅	无论 <p> 位置，仅选第一个 <p>
.card > p:first-child	❌	仅当 <p> 是第一个子元素时生效
.card > p:nth-child(2)	❌	仅当 <p> 在第二个位置时生效，与“第一个 <p>”无关

3.2 Class + 伪类：批量元素的精细化控制

Class 选择器匹配批量同类元素，结合伪类可实现“批量元素+状态/结构”的统一控制，是组件化开发核心用法。

组合类型	选择器示例	功能描述	应用场景
状态伪类	.btn:hover	鼠标悬停时的按钮样式	按钮交互效果
状态伪类	.input:focus	输入框聚焦时的样式	表单交互反馈
结构性伪类	.card:nth-child(even)	偶数位置 .card 的样式	卡片列表奇偶布局
否定伪类	.link:not(.external)	排除 .external 类的 .link	区分内部/外部链接样式

代码示例：按钮交互样式

<button class="btn">普通按钮</button>
<button class="btn" disabled>禁用按钮</button>

<style>
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}
</style>

3.3 ID + 伪类：唯一元素的精准控制

ID 选择器匹配唯一元素（页面中 ID 不可重复），结合伪类主要用于“唯一元素状态”或“其内部子元素筛选”。

组合类型	选择器示例	功能描述	应用场景
状态伪类	#header:hover	唯一导航栏悬停样式	页面头部交互
状态伪类	#search:focus	唯一搜索框聚焦样式	搜索框动态宽度
子元素筛选	#table > .row:nth-child(even)	唯一表格中偶数行样式	数据表格奇偶行背景

代码示例：搜索框聚焦展开

<input type="text" id="search" placeholder="搜索...">

<style>
#search {
  width: 200px;
  padding: 6px;
  transition: width 0.3s;
}
#search:focus {
  width: 300px;
  outline: none;
  border-color: #2196F3;
}
</style>

3.4 Class + 伪类 vs ID + 伪类：核心区别

对比维度	Class + 伪类	ID + 伪类
匹配范围	多个元素（Class 可复用）	唯一元素（ID 不可重复）
核心用途	批量组件的状态/结构控制	唯一元素状态 + 其内部子元素筛选
优先级	中（Class 优先级：10）	高（ID 优先级：100）
灵活性	高（适用于任意数量同类元素）	低（仅针对单个元素）

四、显式声明父选择器

在 LESS 预处理器中，嵌套语法是简化代码的重要特性，而 .classA { .classB } 与 .classA { & .classB } 是两种看似相似但容易引发困惑的嵌套写法。表面上两者都用于描述层级关系，但需要从 LESS 编译逻辑 和 选择器引用规则 深入理解其本质。

4.1 核心区别：编译结果与 & 的作用

两种写法的核心差异体现在对“父选择器引用”的显式与否，但最终编译结果完全一致，均生成“后代选择器”。

4.1.1 编译结果对比

LESS 嵌套写法	编译后生成的 CSS 选择器	匹配关系
.classA { .classB {} }	.classA .classB {}	后代选择器
.classA { & .classB {} }	.classA .classB {}	后代选择器

代码示例验证：

// 写法1：无 & 的嵌套
.classA {
  .classB {
    color: red;
  }
}

// 写法2：有 & 的嵌套
.classA {
  & .classB {
    color: blue;
  }
}

编译后生成的 CSS 均为：

.classA .classB {
  color: red;
}
.classA .classB {
  color: blue;
}

4.1.2 & 的作用：显式引用父选择器

LESS 中的 & 是“父选择器引用符”，用于显式指向当前嵌套的父选择器（此处父选择器为 .classA）。

• 在 .classA { .classB {} } 中，LESS 会默认将子选择器 .classB 解析为父选择器的后代，隐含“父选择器 + 空格 + 子选择器”的关系。
• 在 .classA { & .classB {} } 中，& 显式替换为父选择器 .classA，最终形成 .classA .classB，与默认解析逻辑一致。

4.2 为什么两种写法结果相同？

LESS 设计嵌套语法的初衷是简化后代选择器的书写，默认规则为：“嵌套在父选择器内部的子选择器，会自动被解析为父选择器的后代（即父选择器 + 空格 + 子选择器）”。

因此，无论是否显式使用 &，只要子选择器前有空格（或默认隐含空格），最终都会生成后代选择器。

• .classA { .classB }：默认隐含“父选择器 + 空格”，等价于 .classA .classB。
• .classA { & .classB }：& 显式替换为父选择器，& .classB 等价于 .classA .classB。

4.3 何时需要显式使用 &？

虽然两种写法在简单场景下结果一致，但 & 的核心价值体现在复杂嵌套场景中，用于消除歧义或实现特殊选择器组合：

场景1：避免多层嵌套中的歧义

当存在多层嵌套时，& 可以明确指向“最外层父选择器”，而非就近的父选择器：

.container {
  .classA {
    // 无 &：默认指向就近父选择器 .classA，生成 .container .classA .classB
    .classB { color: red; }
    
    // 有 &：显式指向最外层父选择器 .container，生成 .container .classB
    & .classB { color: blue; }
  }
}

编译后：

.container .classA .classB { color: red; }
.container .classB { color: blue; }

场景2：结合伪类/伪元素

当需要将子选择器与父选择器的伪类/伪元素组合时，& 是必须的：

.classA {
  // 无 &：会被解析为 .classA :hover（后代元素的 hover）
  :hover { color: red; }
  
  // 有 &：显式指向 .classA 自身的 hover，生成 .classA:hover
  &:hover { color: blue; }
}

场景3：提高代码可读性

在团队协作或复杂样式表中，显式使用 & 可以让其他开发者直观理解选择器的层级关系，避免对默认嵌套规则的猜测。

4.4 总结

维度	.classA { .classB {} }	.classA { & .classB {} }
编译结果	相同（均为 .classA .classB）	相同（均为 .classA .classB）
核心差异	依赖 LESS 默认嵌套规则（隐含父选择器）	显式引用父选择器（& 明确指向 .classA）
适用场景	简单层级关系，追求简洁	复杂嵌套、需消除歧义、提高可读性
必要性	可选（默认规则可覆盖）	复杂场景下推荐（避免误解）

简言之，两种写法在简单场景下功能一致，但 & 作为显式引用符，在复杂嵌套中能更清晰地表达选择器关系，是提升代码可维护性的更佳实践。

五、核心疑难点与常见错误总结

整理之前讨论的高频疑问与易错点，帮你避开陷阱：

常见疑问/错误	正确结论/解法	示例对比
.classA .classB 与 .classA.classB 混淆	有空格=后代，无空格=交集	.box .red（.box 后代的 .red） vs .box.red（同时有 .box 和 .red）
认为 > 前后必须有空格	空格非必需，仅影响可读性，推荐添加	.parent > .child（推荐） vs .parent>.child（合法但难读）
误用 :first-child 代替 :first-of-type	:first-child 依赖子元素位置，:first-of-type 依赖标签类型	.card > p:first-child（需 p 是第一个子元素） vs .card > p:first-of-type（仅需是第一个 p）
认为 ID + 伪类可用于批量元素	ID 唯一，批量元素需用 Class + 伪类	#btn:hover（仅控制一个按钮） vs .btn:hover（控制所有按钮）