通用兄弟选择器

概述

兄弟选择符,位置无须紧邻,只须同层级,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 Recommendation

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
General sibling combinator (A ~ B)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 7Opera Full support 9Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

相关