一. 后代选择器
空格表示后后代，后代不一定是指儿子。指的是祖先结构。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
Snip20161108_8.png
样式
<style type="text/css">
.circle li{
color: green;
}
</style>
结构
<div class="circle">
<ul>
<li>花园</li>
<li>果园</li>
<li>动物园</li>
</ul>
</div>
二. 交集选择器
选择的元素是勇士满足两个条件，一般都是以标签名开头，比如div.aa、p.bb。交集选择器没有空格。所以div.aa与div .aa不是一个意思。
三. 并集选择器
用逗号表示并集。
h2,li{
color:red;
}
四. 通配符
*表示所有元素，一般不用，主要是用来清除一些系统自带的格式
*{
margin: 0;
padding: 0;
}
额外补充:
windows xp 操作系统安装的IE6
windows vista 操作系统安装的IE7
windows 7 操作系统安装的IE8
windows 8 操作系统安装的IE9
windows10 操作系统安装的edge
四. 儿子选择器
IE7(windows 7)开始兼容，IE6(windows xp)不兼容
div>p{
color: red;
}
儿子选择器只能是儿子，不是那种祖辈关系。
能够选择(父子关系):
<div>
<p>我是div的大儿子</p>
</div>
不能选择(隔代关系):
<div>
<ul>
<li>
<p>我是div的大儿子</p>
</li>
</ul>
</div>
五. 兄弟选择器
IE7开始兼容，IE6不兼容
+兄弟选择器
样式
<style type="text/css">
h4+h2{
color: red;
}
</style>
结构 (h4后面的紧挨着的第一个兄弟，即h2会变成红色)
<h4>我是傻逼</h4>
<h2>我是傻逼</h2>
<h4>我是傻逼</h4>
<h4>我是逗逼</h4>
<h4>我是逗逼</h4>
<h4>我是逗逼</h4>
<h2>我是傻逼</h2>
<h4>我是傻逼</h4>
<h2>我是傻逼</h2>
六. 序选择器
IE8开始兼容，IE6、7不兼容
结构
<ul>
<li class="first" >我是老大</li>
<li>我是老二</li>
<li>我是老三</li>
<li>我是老四</li>
<li class="last">我是老末</li>
</ul>
样式
<style type="text/css">
li{
font-size: 20px;
}
ul li.first{
color: red;
}
ul li.last{
color: blue;
}
</style>
Snip20161108_10.png
