CSS 分组和嵌套学习笔记

在 CSS 中，我们可以通过分组和嵌套来同时对多个元素应用样式。这两种技术可以大大简化 CSS 代码，并提高代码的可读性和维护性。

分组

分组指的是将多个选择器组合在一起，然后为这个选择器组合应用相同的样式。可以使用逗号将选择器分隔开。

例如，我们有以下 HTML 代码：

htmlCopy Code
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>

如果我们想将这三个 div 元素的背景色都设置为灰色，可以这样写：

cssCopy Code
.box1,
.box2,
.box3 {
  background-color: gray;
}

嵌套

嵌套指的是在一个选择器中嵌入另一个选择器，以便选择某个元素的子元素或后代元素应用样式。

例如，我们有以下 HTML 代码：

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

如果我们想将 .container 中的 h1 元素设置为红色并加粗，可以这样写：

cssCopy Code
.container h1 {
  color: red;
  font-weight: bold;
}

实例

下面是一个实例，展示了如何使用分组和嵌套来简化 CSS 代码：

htmlCopy Code
<div class="container">
  <h1>Title</h1>
  <p>Paragraph</p>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

cssCopy Code
.container {
  padding: 20px;
  background-color: #f5f5f5;
}

.container h1 {
  color: red;
  font-weight: bold;
}

.container p {
  font-size: 18px;
}

.container ul,
.container li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container a {
  color: blue;
  text-decoration: none;
  font-size: 16px;
}

.container a:hover {
  text-decoration: underline;
}

在上面的例子中，我们首先为 .container 元素应用了背景色和内边距。然后，我们使用嵌套将 h1 和 p 元素的样式放在了 .container 中，这样它们就会继承 .container 的背景色和内边距。接下来，我们使用分组将 ul 和 li 元素的样式组合在一起。最后，我们设置了链接的样式，并使用伪类 :hover 为链接添加了悬停效果。