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

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

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

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

css

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

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

css

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

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

css

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

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

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 种：

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

css
```
.container p { color: blue; } /* .container内部的所有<p>元素 */
```
子选择器（用>分隔）
只选中某个元素的直接子元素（一级后代）。

css
```
.parent > .child { font-weight: bold; } /* 只选.parent的直接子元素.child */
```
相邻兄弟选择器（用+分隔）
选中某个元素紧接其后的同级元素。

css
```
h1 + p { margin-top: 20px; } /* 只选h1后面的第一个<p>元素 */
```
通用兄弟选择器（用~分隔）
选中某个元素后面所有同级的目标元素。

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 中特殊的选择器，用于选中元素的特定状态或特定部分。

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

css

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

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

css

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

伪类与伪元素组合

css

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

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

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

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

计算规则：

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 选择器？

避免过度嵌套
不要写超过 3 层的嵌套选择器（如.parent .child .grandchild），会降低性能且难以维护。
优先使用类选择器
类选择器比元素选择器更灵活，更适合复用。
减少 ID 选择器的使用
ID 选择器优先级过高，容易导致样式冲突。
使用有意义的类名
如.btn-primary比.a1更易理解。
利用组合选择器
用.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;
}

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