Skip to main content

一般兄弟组合器 General sibling combinator

Docs

通用兄弟选择器 - CSS | MDN (mozilla.org)

一般兄弟组合器 General sibling combinator：~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

  • 语法：A ~ B
  • 例子：p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素。
一般兄弟组合器 General sibling combinator
/* 在任意图像后的兄弟段落 */
img ~ p {
  color: red;
}

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

<div class="css-general-sibling-combinator-demo">
  <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>
</div>
http://localhost:3000/css-general-sibling-combinator.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!