引言:
CSS 进阶语法涵盖自定义属性、嵌套规则与高级选择器等核心特性，用于编写更高效、可维护的样式代码。本文系统讲解 CSS 变量声明与作用域、嵌套语法及 & 选择器、结构伪类与属性选择器的进阶用法。

CSS 进阶语法：现代 CSS 的核心利器

当你掌握了基础的选择器和属性之后，真正让 CSS 变得灵活、强大且易于维护的，是它的进阶语法。这就像从学会单个的字词，到能够熟练运用修辞手法和文章结构，写出结构清晰、表达高效的篇章。

CSS 进阶语法的核心，在于利用一些“高级工具”来编写更干净、更智能、更具扩展性的代码。下面我们将聚焦于其中最重要的几个部分。

一、CSS 自定义属性：实现“一处修改，全局生效”

CSS 自定义属性，通常被称为 CSS 变量，它允许你创建一个可以在整个样式表中重复使用的值。这彻底改变了以往“复制粘贴”CSS 值的模式。

1. 声明与使用

声明一个自定义属性，你需要使用以两个连字符 -- 开头的名称，并像普通属性一样赋予它一个值。为了让它在全局范围内可用，通常会在 :root 伪类中声明它，:root 代表文档的根元素（即 <html>）。

1
2
3
4
5
/* 声明全局变量 */
:root {
  --main-color: #3498db;
  --base-padding: 1.5rem;
}

使用变量时，通过 var() 函数来引用它。var() 函数接受一个变量名作为必要参数，并可以接受一个可选的“回退值”，当变量未定义时使用。

1
2
3
4
5
6
.button {
  background-color: var(--main-color);
  padding: var(--base-padding);
  /* 如果 --main-color 未定义，则使用蓝色作为回退 */
  border-color: var(--main-color, blue); 
}

2. 变量的继承与作用域

自定义属性遵循 CSS 的层叠和继承规则。这意味着你可以为不同的元素或类分别定义相同的变量名，从而实现局部覆盖。例如，你可以在 .container 内部重新定义 --main-color，那么该容器内的 .button 将使用这个新的颜色，而不影响外部。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 全局背景色为浅色 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* 在深色容器内覆盖变量 */
.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

二、CSS 嵌套：告别冗余，更贴近 HTML 结构

CSS 嵌套模块允许你在一个父选择器的内部直接编写其子选择器的样式规则，而无需重复写父选择器。这让样式表的结构与 HTML 结构更加相似，逻辑一目了然，尤其在大型项目中，极大地提升了可读性和维护性。

1. 基础用法

传统的 CSS 写法常需要重复选择器：

1
2
3
4
.card { /* ... */ }
.card .card-title { /* ... */ }
.card .card-body { /* ... */ }
.card .card-footer { /* ... */ }

使用 CSS 嵌套后，代码变得更清晰、更聚合：

1
2
3
4
5
6
.card {
  /* ... */
  .card-title { /* ... */ }
  .card-body { /* ... */ }
  .card-footer { /* ... */ }
}

2. & 嵌套选择器

& 是一个专门用于嵌套语法的特殊选择器，它代表了对父选择器的引用。在以下场景中，& 的使用至关重要：

  • 组合选择器与伪类：例如 &:hover 会生成 .card:hover。
  • 拼接类名：在诸如 BEM 的命名规范中，& 可以拼接字符串。比如 &__title 会生成 .card__title，但需注意其特定限制。
1
2
3
4
5
6
.card {
  &__title { /* .card__title */ }
  &:hover { /* .card:hover */ }
  /* 使用 & 创建组合选择器 */
  .featured & { /* .featured .card */ }
}

3. 嵌套 At-Rules

CSS 嵌套的强大之处还在于它可以嵌套 @media 查询或 @layer 等其他规则。这让与媒体查询相关的样式可以紧贴其父选择器定义，而不是分散在文件底部。

1
2
3
4
5
6
7
.card {
  width: 100%;
  /* 将媒体查询直接写在 card 规则内 */
  @media (min-width: 768px) {
    width: 50%;
  }
}

三、高级选择器：更精准地控制元素

除了基础的选择器，CSS 还提供了一系列高级选择器，让你能基于更复杂的条件（如元素在 DOM 树中的位置、属性特征或状态）来定位元素。

1. 结构伪类：根据位置选择

这类选择器基于元素在其父元素中的位置或类型进行匹配，极大减少了对额外 class 的依赖。

选择器 描述与用法
:first-child / :last-child 匹配父元素中的第一个/最后一个子元素。
:nth-child(n) 匹配父元素中第 n 个子元素。n 可以是数字、关键词（如 even 偶数、odd 奇数）或公式（如 3n+1）。
:first-of-type / :last-of-type 匹配父元素中同类型标签的第一个/最后一个子元素。 
1
2
3
4
5
6
7
8
9
/* 表格隔行变色 */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 除第一个以外的所有段落 */
p:not(:first-child) {
  margin-top: 1em;
}

2. UI 元素状态伪类

这类选择器根据表单元素的状态来应用样式，常用于提升交互体验。

  • :enabled / :disabled：匹配可用/不可用的控件。
  • :checked：匹配被选中的单选按钮或复选框。
  • :focus：匹配获得焦点的元素。

3. 属性选择器：基于属性值匹配

属性选择器允许你根据 HTML 元素的属性及其值来选择元素，极其灵活。

选择器 描述与用法
[attr] 匹配具有 attr 属性的元素。
[attr="value"] 匹配 attr 属性值完全等于 value 的元素。
[attr^="value"] 匹配 attr 属性值以 value 开头的元素。
[attr$="value"] 匹配 attr 属性值以 value 结尾的元素。
[attr*="value"] 匹配 attr 属性值包含 value 的元素。 
1
2
3
4
5
6
7
8
9
/* 所有指向外部链接的 a 标签 */
a[href^="https://"] {
  color: green;
}

/* 所有 .jpg 结尾的图片 */
img[src$=".jpg"] {
  border: 2px solid #ccc;
}

总结

CSS 进阶语法并非复杂难懂的黑科技，而是一套帮助你构建更健壮、更优雅样式表的“最佳实践工具箱”：

  • 自定义属性 (--var) 解决了“魔法数字”问题，让主题切换和全局维护变得轻而易举。
  • CSS 嵌套 (&) 让你的样式表结构更清晰，更贴近 HTML 的结构逻辑。
  • 高级选择器 赋予了你基于元素在文档结构中的位置、属性和状态进行精确样式控制的能力。

掌握这些进阶技巧，你将不再只是会用 CSS，而是能更好地驾驭它。值得注意的是，W3C 正在酝酿更多进阶特性，例如用于定义可复用样式块的 CSS Functions and Mixins 模块，未来有望进一步提升 CSS 的能力。