CSS 分组和嵌套

当多条规则使用相同的样式时，可以把选择器写在一起（分组）；当样式只针对某元素内部的子元素时，可以把选择器按层级写（嵌套，即后代选择器）。这样既能减少重复，又便于维护。

选择器分组（同一组样式，多个选择器）

若多个选择器需要完全相同的样式，用逗号把它们写在一起，只写一次声明块：

/* 不分组：重复写三遍 */
h1 { color: blue; }
h2 { color: blue; }
h3 { color: blue; }

/* 分组：写一次即可 */
h1, h2, h3 {
  color: blue;
}

再例如：

.button,
input[type="submit"],
.btn-primary {
  padding: 10px 20px;
  border-radius: 4px;
  background: #0066cc;
  color: white;
}

注意：逗号表示「或」——只要匹配其中任意一个选择器，就会应用这组样式。每个选择器之间是独立的，可以写得很复杂。

---

选择器「嵌套」——后代选择器（空格）

「嵌套」在 CSS 里通常指用空格连接的选择器：表示「前面的元素内部的后代元素」。例如「只给 .card 里面的 p 设样式」：

.card p {
  color: #555;
  line-height: 1.6;
}

即：选中「在 .card 内部的任意层级下的 p」，不限于直接子元素。

再例如：

#header .nav a {
  color: white;
  text-decoration: none;
}

表示：在 id="header" 的元素内、class 含 nav 的元素内的所有 a 链接。

---

直接子选择器（>）

若只想选直接子元素，用 >：

ul > li {
  list-style: none;
}

只影响「ul 的直接子元素 li」，不会影响 ul 里再嵌套的 ul 下的 li。后代选择器用空格会选中所有层级，子选择器只选一层。

---

组合使用示例

/* 分组：多个容器内的段落统一样式 */
.article p,
.sidebar p,
.card p {
  margin-bottom: 1em;
}

/* 嵌套：只给主内容区里的列表设样式 */
.main ul {
  padding-left: 1.5em;
}

.main > section {
  margin-bottom: 2rem;
}

---

可读性与维护建议

• 分组不要过长：若同一组里选择器太多，可以拆成多行，每行一个或几个选择器，仍用逗号连接。
• 嵌套不要过深：如 .a .b .c .d .e 会难以维护且优先级很高，一般 2～3 层即可。
• 类名要有意义，避免过度依赖层级（如只用 .content .text .link 而不用类名），方便后续修改。

---

小结

• 分组：用逗号把多个选择器写在一起，共享同一组样式，减少重复。
• 嵌套（后代）：用空格连接，表示「前面元素内部的任意后代」。
• 直接子元素：用 >，只选一层子元素。
• 合理使用分组和嵌套，能让 CSS 更简洁；避免选择器过长、过深。

下一节学习 CSS 尺寸（Dimension）。