4.3 选择器的组合

本节将介绍选择器的组合，它们可以进行更复杂的元素选择:
1. 选择器（没有空格）选择器
两个选择器连着中间没有空格，表示要同时满足两个选择器，例如：
<style>
div.abc{
    /*
    选择了class是abc的所有div元素  
     */
    color:red;
}
#main.abc{
    /*
    选择了id值是main并且class是abc的元素  
     */
    color:blue;
}
</style>
<p class="abc">
    我是p元素，我的class值是abc
</p>
<span>我是span元素</span>
<div class="abc">
    我是div元素,我的class值是abc
</div>
<p id="main" class="abc">
    我是p元素，我的id值是main，我的class值是abc
</p>

2.选择器1（空格）选择器2
两个选择器连着中间有空格，表示选择器1内部的选择器2的所有元素，例如：
div .abc{
   /* 选择了div元素内部class是abc的所有元素 */
}
而下面的html的p元素和span会命中：
<style>
div .abc{
    color:blue;
}
</style>
<div>
    <p class="abc">
        弃我去者，昨日之日不可留。乱我心者，今日之日多烦忧
    </p>
</div>
<div>
    <span class="abc">李白</span>
</div>
再来一个例子：
#main .abc{
   /* 选择了id值是main内部，并且class是abc的元素 */
}
下面的html的第一段p元素会命中，但是第二段的p元素不会命中：
<style>
#mainbe .abc{
    color:yellow;
}
</style>
<div id="mainbe">
    <p class="abc">
        弃我去者，昨日之日不可留。乱我心者，今日之日多烦忧
    </p>
</div>
<div>
    <p class="abc">
        君不见，黄河之水天上来
    </p>
</div>

3 选择器1 > 选择器2
表示选择器1内部的选择器2的所有元素，并且要求选择器1必须是选择器2的直接父元素，它跟上一条很像，但选中的元素必须是以选择器1的元素为父元素，例如：
<style>
div > .abc{
    color:blue;
}
</style>
<div>
    <p class="abc">
        弃我去者，昨日之日不可留。乱我心者，今日之日多烦忧
    </p>
</div>
<div>
    <p>
        <span class="abc">李白</span>
    </p>
</div>
这里第一段的弃我去者会命中，但是后面的李白不会命中，因为李白所处的span元素虽然有abc类，但它的父元素是一个p元素

4. 选择器（逗号）选择器
两个选择器用逗号隔开，表示或者关系
div,.abc{
   /* 选择了class是abc，或者标签是div的元素 */
}
#main,.abc{
   /* 选择了id值是main，或者class是abc的元素 */
}