层次选择器

选择器	类型	功能描述
E F	包含选择器	选择所有被 E 元素包含的元素 F
E > F	子选择器	选择所有作为 E 元素的子元素 F
E + F	相邻选择器	选择紧贴在 E 元素之后兄弟元素 F
E ~ F	兄弟选择器	选择 E 元素之后的所有兄弟元素 F

包含选择器

• 简介

  后代选择器(E F)是选择 E 元素的所有后代 F 元素，不管 F 元素是 E 元素的子元素、孙元素或者更深层的关系，都会被选中。

• 例子

  • index.html

    <ul class="demo_1">
      <li>
        我是儿子元素
        <ul>
          <li>我是孙子元素</li>
        </ul>
      </li>
      <li>我是儿子元素</li>
      <li>我是儿子元素</li>
    </ul>
    

  • index.css

    .demo_1 li {
      border: 1px solid #ff0000;
      margin: 10px;
    }
    

子选择器

• 简介

  子选择器(E>F)是选择 E 元素的所有子后代 F 元素，注意 F 元素仅仅是 E 元素的子元素而已。

• 例子

  • index.html

    <ul class="demo_2">
      <li>
        我是儿子元素
        <ul>
          <li>我是孙子元素</li>
        </ul>
      </li>
      <li>我是儿子元素</li>
      <li>我是儿子元素</li>
    </ul>
    

  • index.css

    .demo_2 li {
      margin: 10px;
    }
    
    .demo_2 > li {
      border: 1px solid #ff0000;
    }
    

相邻选择器

• 简介

  相邻选择器(E+F)是 E 和 F 具有同一个父元素，并且 F 元素在 E 元素后面且相邻。

• 例子

  • index.html

    <p>正文内容</p>
    <p class="demo_3">正文内容 class="demo_3"</p>
    <p>正文内容</p>
    <p>正文内容</p>
    <p>正文内容</p>
    

  • index.css

    .demo_3 + p {
      color: #ffffff;
      background-color: #ff0000;
    }
    

兄弟选择器

• 简介

  兄弟选择器(E~F)是 CSS3 新增选择器，代表 E 和 F 具有同一个父元素，并且 F 元素在 E 元素后面，但是不用相邻。

• 例子

  • index.html

    <p>正文内容</p>
    <p class="demo_4">正文内容 class="demo_4"</p>
    <p>正文内容</p>
    <p>正文内容</p>
    <p>正文内容</p>
    

  • index.css

    .demo_4 ~ p {
      color: #ffffff;
      background-color: #c82829;
    }