后续兄弟选择器

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
This is not red.

Here is a paragraph.

Here is some code.
And here is a red span!
And this is a red span!
More code…

How are you?


Whatever it may be, keep smiling.


Dream big

And yet again this is a red span!

结果

规范

Specification
Selectors Level 4
# general-sibling-combinators

浏览器兼容性

参见