普通兄弟选择器用~连接，选中同父级中位于某元素之后的所有符合条件的同级元素。如p ~ p{color:red}会使第一个p之后所有同级p变红，仅“第二段”“第三段”变色，体现“同级、之后、全部匹配”原则。
普通兄弟选择器（General Sibling Combinator）用波浪号 ~ 表示，用来选择某个元素之后的所有同级兄弟元素，只要它们共享同一个父元素，并且出现在该元素的后面。
它选中的是：在 element 之后出现的、与它同层级的、符合条件的 sibling 元素。注意，前面的 element 不会被选中，后面的兄弟元素只要符合标签或类等条件，都会被影响。
HTML 结构：
<div>CSS：
立即学习“前端免费学习笔记（深入）”；
p ~ p { color: red; }结果：只有“第二段”和“第三段”变成红色，因为它们是第一个 <p> 之后的同级 <p> 元素。“第一段”本身不受影响。
.active ~ .item 来高亮后面的选项基本上就这些。理解重点在于“同级、之后、全部匹配”。不复杂但容易忽略顺序和层级限制。
以上就是css普通兄弟选择器如何理解的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
790
收藏
