跳到主要内容

CSS 嵌套规则

什么是 CSS 嵌套规则？​

CSS 嵌套规则是 CSS 预处理器（如 Sass、Less 和 Stylus）中的一项强大功能。它允许开发者将选择器嵌套在其他选择器内部，从而更直观地组织样式代码。通过嵌套，可以减少重复代码，使样式表更具可读性和可维护性。

在原生 CSS 中，如果需要为嵌套的元素编写样式，通常需要重复父选择器。例如：

css
.parent {
  color: red;
}

.parent .child {
  color: blue;
}

而在 CSS 预处理器中，可以使用嵌套规则简化上述代码：

scss
.parent {
  color: red;

  .child {
    color: blue;
  }
}

这种嵌套方式不仅更直观，还能减少代码量。

嵌套规则的基本语法​

在 CSS 预处理器中，嵌套规则的语法非常简单。只需将子选择器写在父选择器的花括号内即可。以下是一个简单的示例：

scss
.container {
  background-color: #f0f0f0;

  .header {
    font-size: 24px;
    color: #333;
  }

  .content {
    padding: 20px;

    p {
      line-height: 1.6;
    }
  }
}

编译后的 CSS 代码如下：

css
.container {
  background-color: #f0f0f0;
}

.container .header {
  font-size: 24px;
  color: #333;
}

.container .content {
  padding: 20px;
}

.container .content p {
  line-height: 1.6;
}
提示

嵌套规则不仅适用于类选择器，还可以用于 ID 选择器、标签选择器以及伪类和伪元素。

嵌套规则的进阶用法​

1. 父选择器引用​

在嵌套规则中，可以使用 & 符号引用父选择器。这在需要为父选择器添加伪类或组合选择器时非常有用。例如：

scss
.button {
  background-color: blue;

  &:hover {
    background-color: darkblue;
  }

  &.active {
    background-color: green;
  }
}

编译后的 CSS 代码如下：

css
.button {
  background-color: blue;
}

.button:hover {
  background-color: darkblue;
}

.button.active {
  background-color: green;
}

2. 嵌套媒体查询​

嵌套规则还可以与媒体查询结合使用，使代码更具模块化。例如：

scss
.container {
  width: 100%;

  @media (min-width: 768px) {
    width: 50%;
  }
}

编译后的 CSS 代码如下：

css
.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 50%;
  }
}

实际应用场景​

案例 1：导航栏样式​

假设我们需要为一个导航栏编写样式，导航栏包含多个链接，并且需要在鼠标悬停时改变链接的颜色。使用嵌套规则可以轻松实现：

scss
.navbar {
  background-color: #333;

  a {
    color: white;
    text-decoration: none;

    &:hover {
      color: #ff6347;
    }
  }
}

编译后的 CSS 代码如下：

css
.navbar {
  background-color: #333;
}

.navbar a {
  color: white;
  text-decoration: none;
}

.navbar a:hover {
  color: #ff6347;
}

案例 2：卡片组件​

假设我们需要为一个卡片组件编写样式，卡片包含标题、内容和按钮。使用嵌套规则可以使代码更清晰：

scss
.card {
  border: 1px solid #ddd;
  padding: 20px;

  .title {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .content {
    font-size: 14px;
    line-height: 1.5;
  }

  .button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;

    &:hover {
      background-color: #0056b3;
    }
  }
}

编译后的 CSS 代码如下：

css
.card {
  border: 1px solid #ddd;
  padding: 20px;
}

.card .title {
  font-size: 20px;
  margin-bottom: 10px;
}

.card .content {
  font-size: 14px;
  line-height: 1.5;
}

.card .button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
}

.card .button:hover {
  background-color: #0056b3;
}

总结​

CSS 嵌套规则是 CSS 预处理器中的一项重要功能，它通过将选择器嵌套在其他选择器内部，简化了样式表的编写，提升了代码的可读性和维护性。通过嵌套规则，开发者可以更直观地组织样式代码，减少重复代码量，并轻松实现复杂的样式需求。

备注

虽然嵌套规则非常强大，但过度嵌套可能导致生成的 CSS 选择器过于复杂，影响性能。因此，建议在编写嵌套规则时保持适度的层级。

附加资源与练习​

练习​

  1. 尝试使用嵌套规则为一个博客页面编写样式，包括标题、段落、链接和图片。
  2. 使用 & 符号为一个按钮组件添加悬停和点击效果。

资源​

通过不断练习和探索，你将熟练掌握 CSS 嵌套规则，并能够将其应用到实际项目中。