03.CSS嵌套 (Nesting)

CSS嵌套允许你通过将选择器嵌套在一起来编写更易维护和逻辑清晰的样式规则，类似于Sass等预处理器，但这是CSS的原生功能。

本章概述

CSS嵌套是现代CSS中的一个革命性特性，它让开发者能够以更直观、更有组织的方式编写样式代码。通过嵌套，你可以创建反映HTML结构的CSS代码，提高代码的可读性和可维护性。

学习目标

• 理解CSS嵌套的基本概念和语法

• 掌握嵌套选择器的使用方法

• 学会使用父选择器引用(&)

• 了解嵌套的最佳实践和注意事项

• 掌握嵌套与媒体查询的结合使用

CSS嵌套基础

基本语法

CSS嵌套允许你将一个选择器写在另一个选择器内部：

.blog {
  position: relative;
  padding: 1rem;
  background: var(--neutral-100);

  .blog-item {
    border: 1px solid var(--neutral-200);
    margin-bottom: 1rem;
    border-radius: 8px;

    & span {
      font-size: 1rem;
      color: var(--text-secondary);
    }
  }
}

这等同于传统的CSS写法：

.blog {
  position: relative;
  padding: 1rem;
  background: var(--neutral-100);
}

.blog .blog-item {
  border: 1px solid var(--neutral-200);
  margin-bottom: 1rem;
  border-radius: 8px;
}

.blog .blog-item span {
  font-size: 1rem;
  color: var(--text-secondary);
}

父选择器引用 (&)