后续兄弟选择器

**后续兄弟组合器**（~，波浪号）分隔两个选择器，匹配所有出现在第一个元素之后的第二个元素（不一定是紧随其后），并且它们拥有相同的父元素。

在下面的示例中，后续兄弟组合器 (~) 有助于选择和设置出现在图像之后的所有图像兄弟段落的样式。

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 的元素的子元素的 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 类的一个子元素，它是 p 的一个兄弟元素。

当目标选择器是 span 时，会选择作为 p 的兄弟元素的 span 元素。p 元素是 .foo 的一个子元素，所以它的 span 兄弟元素也是。
在 .foo p ~ .foo span 中，目标选择器是 span，它是一个 .foo 的后代。在这种情况下，如果该 .foo 是 p 的同级元素，则选择作为 .foo 后代的 span 元素；从本质上讲，它们都被嵌套在 .foo 的祖先元素中。

规范

规范
选择器级别 4 # 通用同级组合器

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

下一个兄弟选择器