css选择器

1、子选择器 > (所有的直接子类)

比如：

<div id="box">
　　<p>子类1</p>
　　　<div>
　　　　<p>子类2</p>
　　　</div>
</div>
<style>
　　#box>p{
　　　　color:red;
　　}
</style>

 

结果为：只有子类1字体变为红色。

2、相邻选择器  + 

比如：

 <div id="box">
     <h1>1</h1>
     <p>2</p>
     <p>3</p>
     <div>
       <p>4</p>
     </div>
 </div>
<style>
     h1+p{
        color:red;
    }
</style>

结果为：只有数字2变为红色。因为相邻选择器只选择相邻的第一个匹配元素。

3、匹配选择器 ~

比如：

<div id="box">
    <h1>1</h1>
    <p>2</p>
    <p>3</p>
    <div>
      <p>4</p>
    </div>
 </div>
<style>
     h1~p{
        color:red;
    }
</style>

结果为：只有2,3数字变为红色。因为匹配选择器是选择所有在h1之后的同级元素。