CSS高级选择器<后代、交集、并集、儿子、兄弟选择器>

一. 后代选择器

空格表示后后代，后代不一定是指儿子。指的是祖先结构。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

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