此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

后续兄弟选择器

基线 广泛可用

自 2015年7月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

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

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>

结果

规范

规范
Selectors Level 4
# general-sibling-combinators

浏览器兼容性

参见