本文解析css通用兄弟选择器`~`的实际作用范围，并重点澄清一个常见误解：`div ~ div`并未选中`#div4`，而是因`color`属性具有继承性，导致其从父级（被选中的`#div3`）自然获得红色文本样式。
在CSS中，通用兄弟选择器（~）用于匹配位于同一父元素下、且在指定元素之后的所有同级兄弟元素。其语法 A ~ B 表示：选择所有在 A 元素之后、与 A 处于同一层级、同一父容器内的 B 元素。
回到你的HTML结构：
<div id="div1">
div1
<div id="div2">div2</div>
<div id="div3">
div3
<div id="div4">div4</div>
<div id="div5">div5</div>
</div>
</div>应用样式 div ~ div { color: red; } 时，浏览器会逐层解析：
- #div1 是最外层容器；
- #div2 和 #div3 是 #div1 的直接子元素，且处于同一层级 → #div3 在 #div2 之后 → ✅ #div3 被选中；
- #div4 和 #div5 是 #div3 的子元素，不是 #div2 的兄弟，也不与 #div2 或 #div3 同级 → ❌ #div4 和 #div5 本身未被 div ~ div 选中；
- 但 #div3 被成功匹配并应用了 color: red，而 color 是可继承属性（inherited property），因此其所有后代元素（包括 #div4、#div5 及其中的 等）自动继承该颜色值，表现为文字变红。
✅ 验证方式：为 #div3 添加非继承属性（如 border），即可清晰区分选择与继承效果：
立即学习“前端免费学习笔记（深入）”；
div ~ div {
color: red;
border: 2px solid blue; /* 非继承属性，仅作用于被选中的元素 */
}此时只有 #div3 显示蓝色边框，而 #div4 和 #div5 无边框——这证实它们未被选择器匹配，仅继承了 color。
? 关键总结：
- ~ 选择器只匹配同级兄弟元素，不跨越嵌套层级；
- #div4 变红是继承（inheritance）的结果，而非选择器直接作用；
- 判断某属性是否继承：查阅 MDN CSS 属性文档 中“Inherited: yes/no”字段；
- 若需精准控制后代样式，应显式书写后代选择器（如 #div3 div）或使用 all: unset / inherit 显式干预继承行为。
掌握选择器作用域与CSS继承机制的协同关系，是写出可预测、易维护样式的基石。
