CSS选择器（二）

问题：

css选择器#main > .images与#main .images与#main, .images的区别

CSS选择器有以下几种：

元素选择器
类元素选择器
ID选择器
属性选择器
后代选择器
子元素选择器
相邻兄弟选择器

之前在CSS选择器(一)中介绍过前三种，后四种选择器如下所示：

部分选择器.png
由上图可以看出：

• #main > .images为子元素选择器
• #main .images为后代选择器
• #main, .images为组合选择器

以如下代码为例，具体区分：

<div id="main">
    <div class="images">
       我是 main 的子级元素
    </div>
    <div id="inside">
        <div class="images">
            我是 main 的后代元素，但我不是 main 的子级元素
        </div>
    </div>
</div>
<div class="images">
    我的class是main
![Uploading 子元素选择器_140432.png . . .]
</div>

#main > .images

解释：只选择作为id="main"元素子元素且class="images"的元素
为其添加样式：#main > .images{color: red;},显示如下：

子元素选择器.png

#main .images

解释：选择作为id="main"元素后代元素且class="images"的元素
为其添加样式：#main .images{color: red;}，显示如下：

后代选择器.png

#main, .images

所谓组合选择器，就是将两个选择器以“,　”分割，表示两个完全不相关的选择器命中的元素，都适用于后面的css属性。
解释：选择id="main"和class="images"的元素
为其添加样式：#main, .images{color: darkorange;},显示如下：

组合选择器.png

更多选择器示例