一般兄弟选择器 | General sibling selectors
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) |
