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;        }