css普通兄弟选择器如何理解
普通兄弟选择器用~连接，选中同父级中位于某元素之后的所有符合条件的同级元素。如p ~ p{color:red}会使第一个p之后所有同级p变红，仅“第二段”“第三段”变色，体现“同级、之后、全部匹配”原则。
普通兄弟选择器（General Sibling Combinator）用波浪号 ~ 表示，用来选择某个元素之后的所有同级兄弟元素，只要它们共享同一个父元素，并且出现在该元素的后面。
基本语法
element ~ sibling { 样式声明 }它选中的是：在 element 之后出现的、与它同层级的、符合条件的 sibling 元素。注意，前面的 element 不会被选中，后面的兄弟元素只要符合标签或类等条件，都会被影响。
关键理解点
- 必须是同父级的兄弟关系，不能是父子或跨层级
- 目标元素必须出现在指定元素之后，之前的兄弟不会被选中
- 后面的所有匹配的兄弟都会被选中，不只下一个
举个例子
HTML 结构：
第一段
中间内容
第二段
第三段
CSS：
p ~ p { color: red; }结果：只有“第二段”和“第三段”变成红色，因为它们是第一个 之后的同级 元素。“第一段”本身不受影响。
常见用途
- 在某个特殊元素出现后，改变后续同类元素的样式
- 实现如“从某一段开始，后面的文字变色”这类排版需求
- 配合状态类使用，比如
.active ~ .item来高亮后面的选项
基本上就这些。理解重点在于“同级、之后、全部匹配”。不复杂但容易忽略顺序和层级限制。
