概述
这被称为一个相邻选择器. 它只会匹配紧跟其前方元素的同胞元素.
语法
前方元素 + 目标元素 {样式声明 }
示例
li + li {
color: red;
}
上面的CSS作用于下面的HTML
<ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>
则会产生下面的效果:
- One
- Two
- Three
另一个示例就是紧跟 <img> 元素后的"captioin span"的样式 :
img + span.caption {
font-style: italic;
}
当上面的CSS作用于下面的HTML后,它会匹配下面的 <span> 元素:
<img src="photo1.jpg"><span class="caption">The first photo</span> <img src="photo2.jpg"><span class="caption">The second photo</span>
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Selectors Level 3 | Recommendation | |
| CSS 2.1 | Recommendation |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | 7.0 | (Yes) | (Yes) |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
注意:
- 在 Internet Explorer 7 中,当一个元素动态的被插入到目标元素之前时,浏览器不会正确的更新样式.
- 在 Internet Explorer 8 中,如果一个元素是通过点击一个链接动态的被插入的话,直到此链接失去焦点之前该元素的第一个子代元素的样式是不会生效的.