後續兄弟組合器
後續兄弟組合器（~，一個波浪號）將兩個選擇器分開，並匹配第二個元素在第一個元素之後（不一定是緊鄰）且與第一個元素共享相同父元素的所有例項。
在以下示例中，後續兄弟組合器（~）有助於選擇並設定那些既是影像的兄弟元素又出現在任何影像之後的段落的樣式。
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類的元素的後代且該.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 類的後代，而 .foo 是 p 的兄弟元素。
- 當目標選擇器是
span時，選擇的是p的兄弟元素span。p元素是.foo的後代，其span兄弟元素也是如此。 - 在
.foo p ~ .foo span中，目標選擇器是作為.foo後代的span。在這種情況下，如果作為.foo後代的span元素的.foo是p的兄弟元素，則該span元素會被選中；本質上，兩者都巢狀在.foo的一個祖先元素中。
規範
| 規範 |
|---|
| 選擇器 Level 4 # 通用兄弟組合器 |
瀏覽器相容性
載入中…