相邻兄弟选择器（+）选中紧接在后的第一个同级元素，如h1 + p；通用兄弟选择器（~）选中之后所有同级元素，如h1 ~ p，二者均要求元素具有相同父元素。
在 CSS 中，可以使用兄弟选择器来选中某个元素之后的同级元素。这类选择器主要分为两种：相邻兄弟选择器和通用兄弟选择器。
使用 + 符号，可以选择紧接在另一个元素后的第一个同级元素。
例如：
h1 + p 会选中紧跟在 <h1> 后面的第一个 <p> 元素。<p> 必须是 <h1> 的下一个直接兄弟。
h1 + p {
color: red;
}
这个样式会让紧跟在 <h1> 后面的第一个段落文字变成红色。
使用 ~ 符号，可以选择某个元素之后的所有同级元素，不限于紧邻的那一个。
立即学习“前端免费学习笔记（深入）”；
例如：
h1 ~ p 会选中所有在 <h1> 之后的 <p> 元素，只要它们处于同一父容器中。<p> 不必紧挨着 <h1>，中间可以有其他元素。
h1 ~ p {
font-style: italic;
}
这个样式会让 <h1> 后面所有的 <p> 文字变为斜体。
基本上就这些。关键在于理解“兄弟”意味着同级、同父元素”，而“+”只管下一个，“~”管后面所有。
以上就是在css中如何用兄弟选择器选中元素的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
215
收藏
