css中>,+,~用法区别

css中>,+,~用法很容易搞混，下面以代码示例。

1.  > (子选择器）

    <style>
        #test > p
        {
            background-color:Red;
        }
    </style>

<div id="test">
    <p>11111111111111</p>
    <p>22222222222222</p>
    <div>
        <p>333333333</p>
    </div>
</div>

效果图：3333不属于 id='test' div 的直接子元素。

2.更改上面的> 

    <style>
        #test  p
        {
            background-color:Red;
        }
    </style>

效果图： 表示，#test div下面所有的P， 包含子级别，孙子级别，一直往后延续

3.+（相邻选择器）
h1+p，选择紧接在另一个元素后的元素，而且二者有相同的父元素。只会选择第一个相邻的匹配元素。

<div id="test ">
    <p>前面的元素</p>
    <h1>11111111111111</h1> <!--不选择前面的，相邻的匹配元素-->
    <p>22222222222222</p>
    <p>33333333333333</p><!--只会选择第一个相邻的匹配元素-->
    <div>
      <p>44444444444</p>
    </div>
</div>

h1 + p{
       background-color:Red; 
    }

效果图如下

4.~(匹配选择器)


#test ~ p，匹配所有在#test  元素之后的同级p元素

<div id="test">
    <p>前面的元素</p>  <!--不选择前面的，相邻的匹配元素-->

    <h1>11111111111111</h1> 
    <p>22222222222222</p>
    <p>33333333333333</p>
    <div>
      <p>44444444444</p>
    </div>
</div>

    h1 ~ p
      {
            background-color:red; 
       }