相邻兄弟选择器 | Adjacent sibling selectors (Selectors) - CSS 中文开发手册
相邻兄弟组合因子（+）分隔两个选择器。仅当第二个元素直接跟随第一个元素，且两者都是相同父element的孩子节点时，它匹配该第二个元素。
/* Paragraphs that come immediately after any image */
img + p {
font-style: bold;
} 语法
former_element + target_element { style properties } 实例
CSS
li:first-of-type + li {
color: red;
} HTML
<ul> <li>One</li> <li>Two!</li> <li>Three</li> </ul>
结果
规范
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4The definition of ‘next-sibling combinator‘ in that specification. | Working Draft | Renames it the "next-sibling" combinator. |
| Selectors Level 3The definition of ‘Adjacent sibling combinator‘ in that specification. | Recommendation | ? |
| CSS Level 2 (Revision 1)The definition of ‘Adjacent sibling selectors‘ in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | 7.01 | (Yes) | (Yes) |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 2.1 | (Yes) | (Yes) | ? | (Yes) | (Yes) |
相邻兄弟选择器 | Adjacent sibling selectors (Selectors) - CSS 中文开发手册 - Break易站