后续兄弟选择器

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

后续兄弟选择器（~）将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。

css
/* 在任意图像后的兄弟段落 */
img ~ p {
  color: red;
}

语法

css
former_element ~ target_element { style properties }

示例

CSS

css
p ~ span {
  color: red;
}

HTML

html
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<span>And this is a red span!</span>
<code>More code…</code>
<div>How are you?</div>
<p>Whatever it may be, keep smiling.</p>
<h1>Dream big</h1>
<span>And yet again this is a red span!</span>

结果

规范

Specification
Selectors Level 4
# general-sibling-combinators

浏览器兼容性

BCD tables only load in the browser

参见