常用CSS选择器详解：从基础到高级

标签选择器

作用：通过标签名称匹配页面中所有对应标签并设置样式。
格式：

标签名 { 属性: 值; }

示例：

p { color: red; }  /* 所有段落文字变为红色 */

注意：

• 选中页面中所有指定标签，无法单独选中某一个。
• 无论标签嵌套多深都能匹配。
• 任何HTML标签均可作为选择器（如 div、a、img）。

---

ID选择器

作用：通过唯一的ID属性匹配特定标签并设置样式。
格式：

#id名称 { 属性: 值; }

示例：

<div id="header">标题</div>

#header { background: blue; }  /* 仅匹配id为"header"的标签 */

注意：

• ID名称不可重复，且需以字母、数字或下划线组成（不能以数字开头）。
• 避免使用HTML标签名作为ID（如 #h1）。
• 通常保留给JavaScript操作，非必要不用于样式。

---

类选择器

作用：通过class属性匹配一组标签并设置样式。
格式：

.类名 { 属性: 值; }

示例：

<button class="btn">按钮</button>

.btn { padding: 10px; }  /* 匹配所有class包含"btn"的标签 */

注意：

• 类名可重复使用，一个标签可绑定多个类（如 class="btn active"）。
• 命名规范与ID相同，但专为CSS设计。
• 推荐抽取公共样式以减少代码冗余。

---

后代选择器

作用：匹配某个元素内所有层级的特定后代元素。
格式：

祖先元素 后代元素 { 属性: 值; }

示例：

<div><span>文本</span></div>

div span { font-weight: bold; }  /* div内所有span（无论嵌套多深） */

注意：

• 使用空格连接，匹配所有层级后代（子、孙等）。
• 可结合其他选择器（如 .box p）。

---

子元素选择器

作用：仅匹配某个元素的直接子元素。
格式：

父元素 > 子元素 { 属性: 值; }

示例：

<ul>
  <li>项目1</li>  <!-- 匹配 -->
  <div><li>项目2</li></div>  <!-- 不匹配 -->
</ul>

ul > li { color: green; }  /* 仅ul的直接子li */

注意：

• 使用 > 连接，仅匹配直接子级。
• 与后代选择器的主要区别在于层级限制。

---

选择器对比

特性	ID选择器	类选择器	后代选择器	子元素选择器
唯一性	唯一	可重复	-	-
连接符号	#	.	空格	>
层级关系	无	无	所有后代	仅直接子元素
典型用途	JS操作	样式复用	嵌套结构匹配	精确子级控制