概述

兄弟选择符,位置无须紧邻,只须同层级,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 AndroidEdge MobileFirefox 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 YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

 

相关

文档标签和贡献者

标签: 
此页面的贡献者: XiangHongAi, mdnwebdocs-bot, ExE-Boss, xlaoyu, fscholz, teoli, alimon
最后编辑者: XiangHongAi,