先明白一个概念:
<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"元素之后的元素 */
}