CSS基础教程（二十一）分组和嵌套选择器：CSS选择器的群聊攻略：分组与嵌套的开黑指南-优快云博客

第一章：CSS选择器为什么需要"社交"？

想象一下，你要同时给网页上的标题、段落和按钮都设置相同的字体大小和颜色。按照传统写法，你可能会这样写：

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

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

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

看到问题了吗？同样的样式声明重复了三次！这就像是在一个微信群里，同样的消息你非要私聊发给每个人一样 inefficient（低效）。

这时候，CSS分组选择器就像是创建了一个群聊，让这些选择器可以同时接收相同的样式声明：

h1, p, button {
  font-size: 24px;
  color: #333;
}

代码瞬间从9行缩减到3行，是不是清爽多了？这就是分组选择器的魅力！

第二章：分组选择器 - 选择器的"群聊功能"

2.1 基础分组：创建你的第一个选择器群聊

分组选择器使用逗号将多个选择器连接起来，让它们共享相同的样式声明：

/* 多个元素选择器分组 */
h1, h2, h3 {
  font-family: 'Arial', sans-serif;
  margin-bottom: 16px;
}

/* 类选择器分组 */
.primary-btn, .secondary-btn, .outline-btn {
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
}

/* ID选择器和类选择器混合分组 */
#main-header, .page-header, .section-title {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
}

2.2 分组实战：打造一致的表单样式

让我们看一个实际例子。假设我们要创建一个表单，需要统一输入框、选择框和文本域的样式：

<form class="custom-form">
  <input type="text" placeholder="请输入姓名">
  <select>
    <option>选择城市</option>
    <option>北京</option>
    <option>上海</option>
  </select>
  <textarea placeholder="请输入留言"></textarea>
  <button type="submit">提交</button>
</form>

没有分组选择器时，我们可能需要这样写：

.custom-form input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
}

.custom-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
}

.custom-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  height: 100px;
}

使用分组选择器后：

.custom-form input,
.custom-form select,
.custom-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
}

/* textarea特有的样式单独设置 */
.custom-form textarea {
  height: 100px;
}

代码量减少了约40%，而且更易于维护。如果需要修改边框颜色，只需要修改一处即可！

2.3 分组选择器的注意事项

性能考虑：虽然分组可以简化代码，但过于复杂的长分组可能会影响性能。浏览器需要解析每个选择器，所以保持分组简洁很重要。
可读性：当分组过长时，可以考虑每行放置一个选择器：

/* 推荐：每行一个选择器，易于阅读 */
.primary-btn,
.secondary-btn,
.outline-btn,
.special-btn,
.large-btn {
  /* 共用样式 */
}

/* 不推荐：所有选择器挤在一行 */
.primary-btn, .secondary-btn, .outline-btn, .special-btn, .large-btn { /* 样式 */ }

特异性计算：分组中的每个选择器都有自己的特异性（specificity），它们不会相互影响。浏览器会独立计算每个选择器的特异性。

第三章：嵌套选择器 - CSS的"俄罗斯套娃"

如果说分组选择器是创建群聊，那么嵌套选择器就是建立家族关系—它反映了HTML元素的层级结构。

3.1 什么是嵌套选择器？

嵌套选择器通过空格连接多个选择器，表示元素之间的祖先-后代关系：

/* 选择所有在nav元素内的li元素 */
nav li {
  /* 样式 */
}

/* 选择所有在main元素内的article元素内的p元素 */
main article p {
  /* 样式 */
}

3.2 嵌套实战：打造导航菜单

让我们创建一个水平导航菜单：

<nav class="main-nav">
  <ul>
    <li><a href="#"&g