• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 相邻选择器

    定义和用法

    • E+F用于选择第一个元素之后紧跟的元素。也称为相邻同级选择器。相邻兄弟结合符旁边可以有空白符。
    • 此选择器选择作为另一个元素的以下相邻兄弟的元素。两个元素之间的任何文本都将被忽略;仅考虑元素及其在文档树中的位置。

    语法:

    E+F{sRules}

    选择紧贴在E元素之后F元素,元素E与F必须同属一个父级。

    与兄弟选择符(E~F)相同的是,相邻选择符也是选择同级的元素F;不同的是,相邻选择符只会命中符合条件的那个毗邻的兄弟元素(即紧挨着E元素之后的第一个F元素)。

    浏览器支持

    所有浏览器都支持

    例子

    选择所有紧接着<div>元素之后的<p>元素:

    div + p
    {
    background-color:yellow;
    }
    

    下例子中,选择所有父级是<div>元素的<p>元素。如果是相邻选择符,那么只有p1会变成红色;如果是兄弟选择符,那么p1/p2/p3都会变成红色;

    /*相邻选择符(E+F)*/
    h3 + p{color:#f00;}
    
    /*兄弟选择符(E~F)*/
    h3 ~ p{color:#f00;}
    
    <h3>这是一个标题</h3>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    

    上篇:子选择器

    下篇:兄弟选择器