CSS中选择器用法

先明白一个概念：

<div class="view"></div>
<ul id='parent' class="box">
    <li id='child1' class="wrap">
        <img src='xxxx' class="picture" />
        <img src='xxxx' />
        <img src='xxxx' />
    </li>
    <li id='child2'>
        <img src='xxxx' />
    </li>
</ul>

后代元素 : id='parent'的后代元素为所有的<li /> 和 <img />

子代元素 : id='parent'的子代元素为所有的<li />

后代元素是子代元素的超集

css 空格选择器用法：

.box .picture{
    /* 空格选择器可以选择所有含属性class="picture"的后代元素 */
} 

css > 选择器的用法：

.box > .wrap{
    /* >选择器可以选择所有含属性class="wrap"的子元素 */
} 

css ~选择器的用法：

.view ~ .box{
    /* ~选择器可以选择所有同级元素(同一个父元素)含属性class="wrap"的位于属性class="view"元素之后的元素 */
}