概述

在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素 .

语法

元素 ~ 元素 {样式声明 }

示例

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 AndroidiOS SafariSamsung Internet
Basic supportChrome 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

 

相关

文档标签和贡献者

标签: 
此页面的贡献者: xlaoyu, fscholz, teoli, alimon
最后编辑者: xlaoyu,