~ 选择器用于选中某元素后所有同级兄弟元素，如 .container > div ~ div { margin-top: 16px; } 可为非首个 div 添加上边距，实现均匀间距且避免首尾冗余空白。
在CSS中，兄弟组合选择器（General Sibling Combinator）使用波浪符 ~ 来选择位于某个元素之后的所有同级元素。利用这个特性，可以很方便地为同一父容器下的多个同类元素设置统一的样式，同时控制它们之间的间隔。
~ 选择器用于匹配某元素之后所有满足条件的同层级兄弟元素，不论中间隔了多少其他元素。
例如：
h2 ~ p {
margin-top: 1em;
color: gray;
}
这段代码的意思是：所有在 h2 元素之后的 p 元素都会被选中，并应用设定的样式，无论它们之间有没有其他标签。
立即学习“前端免费学习笔记（深入）”；
当你想为一组连续的同级元素（如段落、列表项、卡片等）设置上下间距时，直接添加 margin 可能导致第一个元素顶部或最后一个元素底部出现多余空白。使用 ~ 可以轻松避免这个问题。
示例：给同一个容器内的所有 div 添加上边距，但跳过第一个：
.container > div {
/* 第一个 div 不设上边距 */
}
<p>.container > div ~ div {
margin-top: 16px;
}</p>这样写的效果是：只有从第二个 div 开始的元素才会拥有上边距，视觉上间距均匀且无冗余。
结合类名和 ~，可以对特定类型的兄弟元素统一设置外观与间隔：
.item {
padding: 12px;
background: #f5f5f5;
border: 1px solid #ddd;
}
<p>.item ~ .item {
margin-top: 8px;
}</p>只要多个 .item 在同一个父级下连续或非连续出现，后面的每个都会与前一个保持 8px 的间距。
这种方法特别适合动态内容，比如新闻条目、评论列表、产品卡片等，无需依赖额外的JavaScript或HTML结构调整。
基本上就这些 —— 利用 ~ 选择器，既能统一风格，又能智能控制间隔，简洁又高效。
以上就是CSS兄弟组合选择器如何设置间隔_使用~选择元素统一样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
510
收藏
