h2之后所有同级p元素被选中，h2 ~ p { background: #f0f0f0; } 应用于同父级后续兄弟，与“+”不同，“~”可选中多个非紧邻元素，常用于文章段落统一排版。
CSS通用兄弟选择器（General Sibling Combinator）使用“~”符号，用于选择与某个元素同级且在其之后的所有指定元素。它不关心中间间隔了多少其他兄弟元素，只要目标元素在源元素之后，并且处于同一父容器中即可生效。
“~”选择器的基本语法
选择器的写法如下：
前一个元素 ~ 后一个元素 { 样式声明 }
它表示：选中“前一个元素”之后所有同层级的“后一个元素”。
例如：
h2 ~ p { color: blue; }
立即学习“前端免费学习笔记（深入）”；
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情 
这段代码的作用是：选中页面中所有在
元素之后的同级
元素，并将它们的文字颜色设为蓝色。注意，只有与 h2 处于同一父元素内的后续 p 才会被选中。
实际应用场景举例
假设你有一段文章内容，结构如下：
章节标题
这是第一段文字
- 列表项
这是第二段文字
使用以下CSS：
h2 ~ p { background: #f0f0f0; padding: 10px; }
结果是两个
段落都会被加上背景色，因为它们都在 h2 之后，且是它的兄弟元素。而如果有一个 p 出现在 h2 之前，则不会被选中。
与相邻兄弟选择器“+”的区别
很多人容易混淆“+”和“~”，关键区别在于：“+” 只选中紧接在后的那一个兄弟元素 “~” 选中之后所有的符合条件的兄弟元素例如：
h2 + p：只给紧跟在 h2 后面的那个 p 加样式
h2 ~ p：给 h2 后面所有同级的 p 都加样式
注意事项与使用技巧
使用“~”选择器时需注意以下几点：必须是同父级元素，不能跨层级 目标元素必须出现在源元素的后面，前面的不会被选中 可以结合类名、属性选择器等一起使用，如：.title ~ [class*=”text”] 适用于内容结构固定但中间可能插入未知元素的场景，比如文档排版、博客文章样式控制
基本上就这些。“~”选择器虽小，但在处理文档流样式时非常实用，能有效减少不必要的类名添加。
以上就是CSS通用兄弟选择器如何使用_“~”选择器的功能与用法解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/963086.html
微信扫一扫 
支付宝扫一扫 
