--- title: 通用兄弟选择器 slug: Web/CSS/General_sibling_combinator tags: - CSS - Selectors translation_of: Web/CSS/General_sibling_combinator ---
{{CSSRef}}

概述

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

语法

former_element ~ target_element { style properties }

示例

p ~ span {
  color: red;
}

上面的CSS作用于下面的HTML中:

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>

则会产生下面的效果:

This is not red.

Here is a paragraph.

Here is some code.And here is a span.

规范

Specification Status Comment
CSS Selectors Level 3 {{Spec2('CSS3 Selectors')}}

浏览器兼容性

{{Compat("css.selectors.general_sibling")}}

相关