h2之后所有同级p元素被选中，h2 ~ p { background: #f0f0f0; } 应用于同父级后续兄弟，与“+”不同，“~”可选中多个非紧邻元素，常用于文章段落统一排版。
CSS通用兄弟选择器（General Sibling Combinator）使用“~”符号，用于选择与某个元素同级且在其之后的所有指定元素。它不关心中间间隔了多少其他兄弟元素，只要目标元素在源元素之后，并且处于同一父容器中即可生效。
前一个元素 ~ 后一个元素 { 样式声明 }
它表示：选中“前一个元素”之后所有同层级的“后一个元素”。例如：
h2 ~ p { color: blue; }
立即学习“前端免费学习笔记（深入）”；
这段代码的作用是：选中页面中所有在
<h2></h2> 元素之后的同级 <p></p> 元素，并将它们的文字颜色设为蓝色。注意，只有与 h2 处于同一父元素内的后续 p 才会被选中。
这是第一段文字
可批量生成卡号与密码然后做成实物卡后销售给客户，客户到您的网站来用此卡号密码来提交充值相关游戏卡点、QQ币、其它数字卡等相关信息，(适合做"一卡通")而您在后台可监控客户的提交信息，并手动为客户完成充值后 点击完后重点功能如下：1、卡号、密码批量生成。2、添加和修改游戏名称、区、服务器、充值方法、游戏点卡列隔等充值选择3、开启充值网站和关闭充值网站的功能4、前台用所生成的卡号密
0
这是第二段文字
h2 ~ p { background: #f0f0f0; padding: 10px; }
结果是两个<p></p> 段落都会被加上背景色，因为它们都在 h2 之后，且是它的兄弟元素。而如果有一个 p 出现在 h2 之前，则不会被选中。
h2 + p：只给紧跟在 h2 后面的那个 p 加样式
h2 ~ p：给 h2 后面所有同级的 p 都加样式
基本上就这些。“~”选择器虽小，但在处理文档流样式时非常实用，能有效减少不必要的类名添加。
以上就是CSS通用兄弟选择器如何使用_“~”选择器的功能与用法解析的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
956
收藏
