css普通兄弟选择器如何理解_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-11-30

浏览次数：次

普通兄弟选择器用~连接，选中同父级中位于某元素之后的所有符合条件的同级元素。如p ~ p{color:red}会使第一个p之后所有同级p变红，仅“第二段”“第三段”变色，体现“同级、之后、全部匹配”原则。

css普通兄弟选择器如何理解

普通兄弟选择器（General Sibling Combinator）用波浪号 ~ 表示，用来选择某个元素之后的所有同级兄弟元素，只要它们共享同一个父元素，并且出现在该元素的后面。

element ~ sibling { 样式声明 }

它选中的是：在 element 之后出现的、与它同层级的、符合条件的 sibling 元素。注意，前面的 element 不会被选中，后面的兄弟元素只要符合标签或类等条件，都会被影响。

HTML 结构：

第一段

中间内容

第二段

第三段

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

CSS：

p ~ p { color: red; }

结果：只有“第二段”和“第三段”变成红色，因为它们是第一个 <p></p> 之后的同级 <p></p> 元素。“第一段”本身不受影响。

基本上就这些。理解重点在于“同级、之后、全部匹配”。不复杂但容易忽略顺序和层级限制。

以上就是css普通兄弟选择器如何理解的详细内容，更多请关注其它相关文章！