CSS 分组和嵌套

CSS 分组和嵌套

1. 分组选择器

CSS 分组选择器允许我们将一组选择器放在一起，并同时对它们应用相同的样式规则。这种方式可以简化代码，提高可读性，让样式定义更加集中和清晰。我们可以利用逗号将选择器分隔开来。例如，如果我们想为所有的 `h1`、`h2` 和 `h3` 标签应用相同的样式规则，可以这样写：

这是一个分组选择器的例子，应用了样式规则：

h1, h2, h3 {
  color: #333;
  font-weight: bold;
}

以上代码将把 `color` 设置为 `#333`，将 `font-weight` 设置为 `bold`，应用到所有的 `h1`、`h2` 和 `h3` 标签。

2. 嵌套选择器

CSS 嵌套选择器允许我们按照 HTML 的嵌套关系，直接选取或作用于特定的元素。这样可以简化选择器的书写，使样式规则更加具有结构和层次感。下面是一个嵌套选择器的例子：

2.1 元素嵌套选择器

假设我们想要设置所有 `div` 元素中的 `p` 元素的文本颜色为红色，我们可以这样写：

div p {
  color: red;
}

以上代码将把所有 `div` 元素中的 `p` 元素的文本颜色设置为红色。

2.2 类嵌套选择器

我们还可以利用嵌套选择器来选取特定类下的元素，并对其应用样式规则。例如，我们想要给列表中的链接添加一个特定的样式，可以这样写：

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

以上代码将给所有具有 `navbar` 类的元素下的链接设置文本颜色为蓝色，并去除链接的下划线。

2.3 伪类嵌套选择器

通过嵌套选择器，我们还可以选取特定伪类下的元素，并对其应用样式规则。比如，我们想要把鼠标悬停在链接上时的样式设置为红色并加粗，可以这样写：

a:hover {
  color: red;
  font-weight: bold;
}

以上代码将把鼠标悬停在链接上时的文本颜色设置为红色，并加粗字体。

嵌套选择器是 CSS 中一种非常有用的特性，它可以让我们更方便地选取元素并应用样式规则。合理地使用分组选择器和嵌套选择器可以提高代码的可读性和维护性，让样式定义更加集中和清晰。