mozilla
您的搜索结果

    相邻兄弟选择器

    概述

    这被称为一个相邻选择器. 它只会匹配紧跟其前方元素的同胞元素.

    语法

    前方元素 + 目标元素 { 样式声明 }
    

    示例

    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 中,如果一个元素是通过点击一个链接动态的被插入的话,直到此链接失去焦点之前该元素的第一个子代元素的样式是不会生效的.

    相关

    文档标签和贡献者

    Contributors to this page: teoli, alimon
    最后编辑者: teoli,