一般兄弟选择器 | General sibling selectors
后续兄弟组合因子(~)分隔两个选择器,且只有当它第二个元素位于第一个元素之后(虽然不一定相邻),并且两者是相同的父element的子元素时,它选择满足该条件的第二个元素。
/* Paragraphs that are siblings of and
subsequent to any image */
img ~ p {
color: red;
}语法
former_element ~ target_element { style properties }实例
CSS
p ~ span {
color: red;
}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>
<code>More code...</code>
<span>And this is a red span!</span>结果
规范
Specification | Status | Comment |
|---|---|---|
Selectors Level 4The definition of 'subsequent-sibling combinator' in that specification. | Working Draft | Renames it the "subsequent-sibling" combinator. |
Selectors Level 3The definition of 'general sibling combinator' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 7 | 9 | 3 |
Feature | Firefox Mobile (Gecko) | Android | Edge | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com

