CSS特殊选择器拾遗

1.子代选择器(>)

选择某一元素的子代，只选向下选择一层，不能选择孙代及以后的元素。

<style>
      .demo>h1{
        color: aqua;
      }
    </style>

    <div class="fa">
      <div class="demo">    
         <h1>111</h1> 
     </div >
      <span>2wgwgw</span>

      <div>xxxxx</div>

      <h1>111</h1>
      <p>222</p>
      <div>
        <h1>333</h1>
      </div>

      <h1>4444</h1>
     </div>

2.相邻兄弟选择器(+)

选择某一元素的同一父元素的相邻兄弟元素，只选相邻的后面一个元素，不能选择后面的元素。

<style>
      .demo+h1{
        color: aqua;
      }
    </style>

    <div class="fa">
      <div class="demo">    
         <h1>111</h1> 
     </div >
      <span>2wgwgw</span>

      <div>xxxxx</div>

      <h1>111</h1>
      <p>222</p>
      <div>
        <h1>333</h1>
      </div>

      <h1>4444</h1>
     </div>

3.后续兄弟选择器(~)

选择某一元素的同一父元素的后续兄弟元素，不一定是相邻的兄弟元素。

<style>
      .demo~h1{
        color: aqua;
      }
    </style>

    <div class="fa">
      <div class="demo">    
         <h1>111</h1> 
     </div >
      <span>2wgwgw</span>

      <div>xxxxx</div>

      <h1>111</h1>
      <p>222</p>
      <div>
        <h1>333</h1>
      </div>

      <h1>4444</h1>
     </div>