🌐 CSS 选择器详解：从基础到实战

CSS（Cascading Style Sheets，层叠样式表）是用于控制网页外观的核心技术。它通过"选择器"将样式规则应用到对应的 HTML 元素上。本文将结合你的笔记与多个完整代码示例，系统讲解 CSS 的核心机制与各类选择器的使用方法。

一、CSS 基础结构

一个完整的 CSS 规则由三部分组成：

选择器（Selector） ：指定要样式化的 HTML 元素。
声明块（Declaration Block） ：包含一对大括号 {}，内部是若干声明。
声明（Declaration） ：由"属性: 值"组成的键值对，如 color: red;。

css 复制代码

p {
  color: blue; /* 一个声明 */
  font-size: 16px; /* 另一个声明 */
}

多个这样的规则组合在一起，就构成了一个 样式表（StyleSheet） ，浏览器通过解析这些规则来渲染页面。

二、层叠（Cascading）与优先级

CSS 的"层叠"特性意味着：多个规则可能同时作用于同一个元素 ，此时浏览器会根据优先级决定最终生效的样式。

优先级计算规则（从低到高）

类型	权重（个十百千）
元素/伪元素	0,0,0,1
类/属性/伪类	0,0,1,0
ID 选择器	0,1,0,0
行内样式	1,0,0,0
`!important`	最高（慎用）

✅ 记忆口诀： "个十百千" → element < class < id < inline

示例：优先级实战

xml 复制代码

<style>
  p { color: blue; }                /* 权重：0,0,0,1 */
  .container p { color: red; }      /* 权重：0,0,1,1 */
  #main p { color: green; }         /* 权重：0,1,0,1 */
</style>
<body>
  <div id="main" class="container">
    <p>这是一个段落</p>
  </div>
</body>

✅ 最终颜色为 green ，因为 #main p 的权重最高。

💡 如果再加一行行内样式 <p style="color: purple">，则显示 purple。

三、常用选择器详解

1. 基础选择器

标签选择器 ：p, div
类选择器 ：.book
ID 选择器 ：#main

css 复制代码

.book {
  margin: 10px;
  padding: 15px;
  border: 1px solid #ccc;
}

2. 属性选择器

根据元素的属性或属性值进行选择：

css 复制代码

[data-category="科幻"] {
  background-color: #007bff;
  color: #fff;
}

[title^="入门"] h2::before {
  content: "🌟";
  margin-right: 5px;
}

[attr=value]：精确匹配
[attr^=value]：以 value 开头
[attr$=value]：以 value 结尾
[attr*=value]：包含 value

✅ 应用场景：动态内容分类、图标前缀、国际化等。

3. 后代与子选择器

后代选择器（空格） ：选中所有后代元素
.container p → 包括嵌套在 .inner 中的 <p>
子选择器（>） ：只选直接子元素
.container > p → 不包括 .inner 里的 <p>

xml 复制代码

<div class="container">
  <p>这是和h1前面的文字。</p>
  <h1>标题</h1>
  <p>第一段</p>
  <div class="inner"><p>内部段落</p></div>
</div>

css 复制代码

.container > p { color: pink; }        /* 仅前两个 <p> 生效 */
.container p { text-decoration: underline; } /* 所有 <p> 都有下划线 */

4. 兄弟选择器

相邻兄弟（+） ：紧接在后的第一个同级元素
h1 + p → 选中紧跟 <h1> 后的第一个 <p>
通用兄弟（~） ：后面所有符合条件的同级元素
h1 ~ p → 选中 <h1> 后所有 <p>

css 复制代码

h1 + p { color: red; }     /* 第一段变红 */
p + p { color: green; }    /* 第二段变绿（因为前一个是 p） */
h1 ~ p { color: blue; }    /* 所有 p 最终都变蓝（覆盖前面规则） */

⚠️ 注意：CSS 是"从上到下"解析的，后写的规则会覆盖前面相同优先级的规则。

四、伪类（Pseudo-classes）

用于表示元素的状态或位置关系。

css 复制代码

button:active { background-color: red; }       /* 点击时 */
p:hover { background-color: yellow; }          /* 鼠标悬停 */
input:focus { border: 2px solid blue; }        /* 获得焦点 */
input:checked + label { font-weight: bold; }   /* 选中后影响兄弟 label */
li:not(:last-child) { margin-bottom: 10px; }   /* 除了最后一个 li */
li:nth-child(odd) { background-color: lightgray; } /* 奇数项 */

`:nth-child` vs `:nth-of-type`

:nth-child(n)：按所有子元素中的位置计数
:nth-of-type(n)：按同类标签中的位置计数

xml 复制代码

<div class="container">
  <h1>标题</h1>
  <p>段落1</p>      <!-- 第2个子元素 -->
  <div>div1</div>   <!-- 第3个 -->
  <p>段落2</p>      <!-- 第4个 -->
  <p>段落3</p>      <!-- 第5个 -->
</div>

css 复制代码

.container p:nth-child(2) { background: yellow; }     /* 匹配"段落1"（第2个子元素且是p）*/
.container p:nth-of-type(3) { background: lightblue; }/* 匹配"段落3"（第3个p）*/

✅ 推荐：优先使用 :nth-of-type，更符合直觉。

五、伪元素（Pseudo-elements）

用于向元素添加装饰性内容，不改变 HTML 结构。

css 复制代码

.more::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgb(196, 230, 6);
  transform: scaleX(0);
  transition: transform .3s ease;
}

.more:hover::before {
  transform: scaleX(1); /* 悬停时拉伸下划线 */
}

.more::after {
  content: '\2192'; /* Unicode → 箭头 "→" */
  margin-left: 5px;
}

✅ 伪元素必须包含 content 属性（即使为空），否则不显示。

常见伪元素：

::before / ::after
::first-line / ::first-letter
::selection（用户选中文本的样式）

css 复制代码

::selection {
  background-color: yellowgreen;
  color: white;
}

六、其他实用知识点

1. `margin` 重叠（Margin Collapse）

相邻块级元素的上下 margin 会发生重叠，取最大值而非相加。

✅ 解决方案：使用 padding、border、或创建 BFC（如 overflow: hidden）。

2. 小数像素（如 `10.5px`）

现代浏览器会自动处理小数单位，通常四舍五入到最近的物理像素。但在高 DPI 屏幕（如 Retina）上可呈现亚像素渲染，视觉更平滑。

3. `inline` 元素与 `transform`

<span>、<a> 等 display: inline 元素不支持宽高和某些变换 （如 transform）。若需使用，应改为：

css 复制代码

display: inline-block; /* 或 block */
position: absolute;    /* 绝对定位也会使其生成块级框 */

七、总结：选择器使用建议

场景	推荐选择器
全局样式	标签选择器（如 `p`, `h1`）
组件/模块样式	类选择器（`.card`, `.btn`）
唯一元素	ID（谨慎使用，不利于复用）
动态属性匹配	属性选择器（`[data-*]`）
状态交互	伪类（`:hover`, `:focus`）
装饰性内容	伪元素（`::before`）
精确控制后代结构	子选择器（`>`）

❌ 避免滥用 !important 和行内样式，它们会破坏 CSS 的可维护性。

结语

CSS 选择器是前端开发的基石。掌握其类型、优先级和组合方式，能让你写出精准、高效、可维护 的样式代码。通过你提供的多个示例，我们不仅看到了语法，更理解了何时用哪种选择器------这才是真正的工程能力。

继续练习吧！试着用不同选择器重构你的项目，你会发现 CSS 的强大与优雅。✨

🌐 CSS 选择器详解：从基础到实战

一、CSS 基础结构

二、层叠（Cascading）与优先级

优先级计算规则（从低到高）

示例：优先级实战

三、常用选择器详解

1. 基础选择器

2. 属性选择器

3. 后代与子选择器

4. 兄弟选择器

四、伪类（Pseudo-classes）

:nth-child vs :nth-of-type

五、伪元素（Pseudo-elements）

六、其他实用知识点

1. margin 重叠（Margin Collapse）

2. 小数像素（如 10.5px）

3. inline 元素与 transform

七、总结：选择器使用建议

结语

`:nth-child` vs `:nth-of-type`

1. `margin` 重叠（Margin Collapse）

2. 小数像素（如 `10.5px`）

3. `inline` 元素与 `transform`