CSS选择器

CSS的选择器其实大类的话可以分为三类，即id选择器、class选择器、标签选择器。
用法如下：
    #id名 { 属性名:属性值; }
    . class名 { 属性名:属性值; }

    标签名 { 属性名:属性值; }

其中，他们之间又可以以不同的方式进行组合，如下：
    后代选择器: 父代名 后代名 { 属性名:属性值; }
    子代选择器: 父代名>子代名 { 属性名:属性值; }
    群组选择器: #name1, .name2, #name div { 属性名:属性值; }
    伪类选择器: name:伪类
    通用(通配符)选择器: * { 属性名: 属性值; }……

1. 后代选择器和子代选择器的区别：

举例说明：

有html布局如下：

对应的html代码的文档树结构如图：

然后我们在<style>标签里增加一个子代选择器
 .mainDiv > div{
            background-color: green;
        }
让子代的背景色都为绿色
修改后保存用浏览器打开如图，可见【儿子】那个div已经变为绿色

然后我们去掉子代选择器，添加一个后代选择器
.mainDiv div{
            background-color: red;
        }
让后代的背景色都为红色
修改后保存用浏览器打开如图，可见【儿子】和【孙子】的div已经变为红色

现在我们再看看把上面的子代和后代样式都同时应用，效果如图。
经过上面的结果展示，我们能得到结论。
子代选择器：只对应用对象的直接相应子节点有效。如实例代码中的儿子div。
后代选择器：对应用对象内的所有相应子节点都有效。如实例中的儿子div和孙子div。

2. CSS选择器里，“元素.类名” 与“类名.元素”有什么区别？
元素.类名
p.abc{
       color:red;
    }
表示：类名是abc的标签p的颜色是red

类名.元素
.abc p{
    color:red;
}
表示：类名abc的任何标签旗下的p标签颜色是red。