CSS 选择器全解析：分组选择器/嵌套选择器，从基础到高级

一、CSS 选择器基础：从单个元素到多个元素

CSS 选择器是用来定位 HTML 元素的工具，就像 “元素的地址”。最基础的选择器有：

1. 元素选择器（按标签名定位）

   css

   p { color: red; }       /* 所有<p>标签 */
   div { background: #f0f0f0; } /* 所有<div>标签 */
   

2. ID 选择器（按元素 ID 定位，唯一）

   css

   #header { height: 100px; } /* ID为header的元素 */
   

3. 类选择器（按元素 class 定位，可重复）

   css

   .button { padding: 10px; } /* 所有class包含button的元素 */
   

4. 属性选择器（按元素属性定位）

   css

   [type="text"] { border: 1px solid #ccc; } /* 所有type="text"的元素 */
   

二、CSS 分组选择器：同时选中多个元素

分组选择器允许你用 ** 逗号 (,)** 将多个选择器组合，为它们应用相同的样式。
语法：

css

选择器1, 选择器2, 选择器3 {属性: 值;
}

示例 1：同时设置 h1、h2、h3 的字体颜色

css

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

示例 2：混合不同类型的选择器

css

#header, .nav-item, [type="button"] {margin-bottom: 10px;
}

分组选择器的优势：

• 减少 CSS 代码重复
• 统一管理相似元素的样式
• 提高代码可读性

三、CSS 嵌套选择器：基于层级关系定位元素

嵌套选择器（也叫组合选择器）通过元素之间的层级关系来定位元素。
常见的嵌套选择器有 4 种：

1. 后代选择器（用空格分隔）
   选中某个元素内部所有层级的目标元素。

   css

   .container p { color: blue; } /* .container内部的所有<p>元素 */
   

2. 子选择器（用>分隔）
   只选中某个元素的直接子元素（一级后代）。

   css

   .parent > .child { font-weight: bold; } /* 只选.parent的直接子元素.child */
   

3. 相邻兄弟选择器（用+分隔）
   选中某个元素紧接其后的同级元素。

   css

   h1 + p { margin-top: 20px; } /* 只选h1后面的第一个<p>元素 */
   

4. 通用兄弟选择器（用~分隔）
   选中某个元素后面所有同级的目标元素。

   css

   img ~ p { color: gray; } /* 选img后面所有同级的<p>元素 */
   

嵌套选择器示例：

html

<div class="container"><h2>标题</h2><p>第一段</p>    <!-- 会被选中 --><div><p>第二段</p>  <!-- 会被选中 --></div>
</div>

css

.container p { color: red; } /* 选中所有层级的<p> */
.container > p { color: blue; } /* 只选中直接子级的<p>（第一段） */

四、复杂 CSS 写法：组合多种选择器

实际开发中，我们常将多种选择器组合使用，实现更精准的元素定位。

1. 组合类选择器和元素选择器

css

/* 选中class为btn且是<button>标签的元素 */
button.btn {background: #007bff;color: white;
}

2. 多层嵌套选择器

css

/* 选中.header内部的.nav列表中的.active菜单项 */
.header .nav .active {font-weight: bold;color: #ff6600;
}

3. 属性和伪类组合

css

/* 选中所有disabled状态的输入框 */
input[disabled] {background: #eee;cursor: not-allowed;
}

4. 复杂示例：表单样式

css

/* 选中form中所有type为text的input的父级元素 */
form .form-group > input[type="text"] {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 4px;
}/* 选中焦点状态的input，并改变其父级的样式 */
form .form-group input:focus + label {color: #007bff;
}

五、伪类和伪元素：特殊状态与特殊位置

伪类和伪元素是 CSS 中特殊的选择器，用于选中元素的特定状态或特定部分。

1. 常见伪类（用单冒号:表示）

   css

   a:hover { color: red; }       /* 鼠标悬停状态 */
   input:focus { border: 2px solid blue; } /* 获得焦点状态 */
   li:nth-child(odd) { background: #f0f0f0; } /* 奇数行 */
   p:first-child { font-size: 18px; } /* 第一个子元素 */
   

2. 常见伪元素（用双冒号::表示）

   css

   p::first-letter { font-size: 24px; } /* 首字母 */
   p::before { content: "→ "; } /* 在元素前插入内容 */
   p::after { content: " ←"; } /* 在元素后插入内容 */
   ::selection { background: yellow; } /* 选中的文本 */
   

3. 伪类与伪元素组合

   css

   /* 选中第一个段落的首字母 */
   p:first-child::first-letter {color: red;font-size: 32px;
   }
   

六、选择器优先级：谁的样式会生效？

当多个选择器作用于同一元素时，CSS 会根据优先级规则决定使用哪个样式。
优先级从高到低：

1. !important（强制优先级，但不推荐滥用）
2. 内联样式（直接写在 HTML 元素的 style 属性中）
3. ID 选择器（#id）
4. 类 / 属性 / 伪类选择器（.class、[attr]、:hover）
5. 元素 / 伪元素选择器（p、::before）
6. 通配符选择器（*）

计算规则：

• ID 选择器：100 分
• 类 / 属性 / 伪类：10 分
• 元素 / 伪元素：1 分
• 通配符：0 分

示例：

css

#header { color: red; } /* 100分 */
.header h1 { color: blue; } /* 11分（1个类 + 1个元素） */
h1 { color: green; } /* 1分 */

最终 h1 的颜色是red（100 分优先级最高）。

七、最佳实践：如何写出高效的 CSS 选择器？

1. 避免过度嵌套
   不要写超过 3 层的嵌套选择器（如.parent .child .grandchild），会降低性能且难以维护。

2. 优先使用类选择器
   类选择器比元素选择器更灵活，更适合复用。

3. 减少 ID 选择器的使用
   ID 选择器优先级过高，容易导致样式冲突。

4. 使用有意义的类名
   如.btn-primary比.a1更易理解。

5. 利用组合选择器
   用.container > h2代替.container h2，精准定位减少误选。

八、完整示例：电商网站导航栏样式

html

预览

<nav class="main-nav"><ul><li><a href="#" class="active">首页</a></li><li><a href="#">商品分类</a></li><li class="has-submenu"><a href="#">促销活动</a><ul class="submenu"><li><a href="#">限时折扣</a></li><li><a href="#">满减优惠</a></li></ul></li></ul>
</nav>

css

/* 导航栏容器 */
.main-nav {background: #333;height: 50px;
}/* 主菜单列表 */
.main-nav > ul {list-style: none;margin: 0;padding: 0;
}/* 主菜单项 */
.main-nav > ul > li {display: inline-block;position: relative;
}/* 主菜单链接 */
.main-nav > ul > li > a {display: block;color: white;padding: 0 15px;line-height: 50px;text-decoration: none;
}/* 激活状态的链接 */
.main-nav > ul > li > a.active {background: #007bff;
}/* 鼠标悬停效果 */
.main-nav > ul > li > a:hover {background: #555;
}/* 子菜单容器 */
.has-submenu .submenu {display: none;position: absolute;background: #555;width: 150px;
}/* 子菜单项 */
.has-submenu:hover .submenu {display: block;
}/* 子菜单链接 */
.submenu li a {display: block;color: white;padding: 10px 15px;text-decoration: none;
}/* 子菜单链接悬停 */
.submenu li a:hover {background: #777;
}

通过掌握分组选择器、嵌套选择器和复杂组合，你可以精准控制网页中每一个元素的样式。建议多动手实践，在实际项目中加深理解！