后续兄弟组合器
后续兄弟组合器（~，一个波浪号）将两个选择器分开，并匹配第二个元素在第一个元素之后（不一定是紧邻）且与第一个元素共享相同父元素的所有实例。
在以下示例中，后续兄弟组合器（~）有助于选择并设置那些既是图像的兄弟元素又出现在任何图像之后的段落的样式。
css
img ~ p {
color: red;
}
语法
css
/* The white space around the ~ combinator is optional but recommended. */
former_element ~ target_element { style properties }
示例
将组合器与简单选择器一起使用
此示例演示了当两个选择器都是简单选择器（p 和 span）时 ~ 组合器的用法。
html
<article>
<span>This is not red because it appears before any paragraph.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>
This span is red because it appears after the paragraph, even though there
are other nodes in between.
</span>
<p>Whatever it may be, keep smiling.</p>
<h1>Dream big</h1>
<span>
Doesn't matter how many or what kind of nodes are in between, all spans from
the same parent after a paragraph are red.
</span>
</article>
<span>
This span is not red because it doesn't share a parent with a paragraph.
</span>
css
p ~ span {
color: red;
}
将组合器与复杂选择器一起使用
此示例包含两个复杂选择器，两者都使用了后续兄弟组合器：.foo p ~ span 和 .foo p ~ .foo span。
- 第一个复杂选择器
.foo p ~ span匹配所有在段落之后出现的 span 元素，**如果**该 span 元素和段落共享相同的父元素，**并且**该父元素或其某个祖先元素具有.foo类。 - 第二个复杂选择器
.foo p ~ .foo span匹配所有作为具有.foo类的元素的后代且该.foo元素是前面提到的段落的兄弟元素的 span 元素。
下面的示例显示，复杂选择器中的目标元素必须与复杂选择器中的初始元素共享相同的父元素。
html
<h1>Dream big</h1>
<span>And yet again this is a red span!</span>
<div class="foo">
<p>Here is another paragraph.</p>
<span>A blue span</span>
<div class="foo">
<span>A green span</span>
</div>
</div>
css
.foo p ~ span {
color: blue;
}
.foo p ~ .foo span {
color: green;
}
在上面的 HTML 中，.foo p 的两个兄弟元素是 span 和 .foo。绿色的 span 是 .foo 类的后代，而 .foo 是 p 的兄弟元素。
- 当目标选择器是
span时，选择的是p的兄弟元素span。p元素是.foo的后代，其span兄弟元素也是如此。 - 在
.foo p ~ .foo span中，目标选择器是作为.foo后代的span。在这种情况下，如果作为.foo后代的span元素的.foo是p的兄弟元素，则该span元素会被选中；本质上，两者都嵌套在.foo的一个祖先元素中。
规范
| 规范 |
|---|
| 选择器 Level 4 # 通用兄弟组合器 |
浏览器兼容性
加载中…