CSS 分组 和 嵌套 选择器

在 CSS 中，我们可以使用分组和嵌套选择器来更好地管理和组织样式规则。分组选择器允许我们将相同的样式应用于多个选择器，而嵌套选择器则可以更清晰地表示元素之间的层级关系。

CSS 分组选择器

通过使用逗号将多个选择器组合在一起，我们可以为它们应用相同的样式规则。这样可以减少代码重复，提高代码的可维护性。

h1, h2, h3 {
  color: #333;
  font-family: Arial, sans-serif;
}

在上面的示例中，我们将 h1、h2 和 h3 标签的文字颜色设置为 #333，并使用 Arial 字体。

CSS 嵌套选择器

嵌套选择器可以帮助我们更清晰地表示元素之间的层级关系，避免选择器的层级过深导致代码难以维护。

<div class="container">
  <h1>Title</h1>
  <p>Paragraph</p>
</div>

-- -------------------- ---- -------
---------- -
  ----------------- --------

  -- -
    ------ -----
    ---------- -----
  -

  - -
    ------ -----
    ---------- -----
  -
-

在上面的示例中，我们为容器元素设置了背景颜色，并分别为其中的 h1 和 p 元素设置了不同的样式。

通过合理地使用 CSS 分组选择器和嵌套选择器，我们可以更好地管理和组织样式规则，使代码更加清晰和易于维护。