CSS教程：兄弟选择器 作者：马育民 • 2024-12-24 08:26 • 阅读：10015 # ~兄弟选择器 ### 语法 表示选择 `A` 元素后的所有 `B` 元素，但是 `A` 和 `B` 必须有 **相同的父元素** ``` A ~ B ``` ### 例子 选中 `h3` 标签后面，所有的 `h5` 标签，且这些 `h5` 标签与 `h3` 标签有同一个父元素（`div`） ``` <style> h3~h5{ color: red; } </style> ``` ``` <div> <div> <h3>我是第1行</h3> <h5>我是第2行</h5> <h4>我是第3行</h4> <h5>我是第4行</h5> </div> <h4>我是第5行</h4> <h5>我是第6行</h5> </div> ``` 执行结果：`我是第2行` 和 `我是第4行` 是红色 # 紧邻兄弟组合器 ### 语法 表示选择紧邻在 `A` 元素后面的 `B` 元素，且 `A` 和 `B` 必须拥有 **相同的父元素**，所选到的 **仅为一个B元素** ``` A + B ``` ### 例子 选中 `h3` 标签后面，紧邻的 `h5` 标签，且该 `h5` 标签与 `h3` 标签有同一个父元素（`div`） ``` <style> h3+h5{ color: red; } </style> ``` ``` <div> <div> <h3>我是第1行</h3> <h5>我是第2行</h5> <h4>我是第3行</h4> <h5>我是第4行</h5> </div> <h4>我是第5行</h4> <h5>我是第6行</h5> </div> ``` 执行结果：`我是第2行` 是红色 参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_selectors https://blog.csdn.net/amnesiac666/article/details/122060057 原文出处：http://malaoshi.top/show_1GWHFHIoM5L.html