后续兄弟选择器
后续兄弟选择器(~
)将两个选择器分开,并匹配第二个选择器的所有迭代元素,位置无须紧邻于第一个元素,只须有相同的父级元素。
css
/* 在任意图像后的兄弟段落 */
img ~ p {
color: red;
}
语法
css
former_element ~ target_element { style properties }
示例
CSS
css
p ~ span {
color: red;
}
HTML
html
<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>
结果
规范
Specification |
---|
Selectors Level 4 # general-sibling-combinators |
浏览器兼容性
BCD tables only load in the browser