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

一. 后代选择器

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

Snip20161108_8.png

样式

结构

    

        
花园
        
果园
        
动物园
    

二. 交集选择器

选择的元素是勇士满足两个条件，一般都是以标签名开头，比如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的大儿子

不能选择(隔代关系):

    

        

            
我是div的大儿子
        
    

五. 兄弟选择器

IE7开始兼容，IE6不兼容
+兄弟选择器
样式

结构 (h4后面的紧挨着的第一个兄弟，即h2会变成红色)

我是傻逼
我是傻逼

我是傻逼
我是逗逼
我是逗逼
我是逗逼
我是傻逼

我是傻逼
我是傻逼

六. 序选择器

IE8开始兼容，IE6、7不兼容
结构

    
我是老大
    
我是老二
    
我是老三
    
我是老四
    
我是老末

样式

Snip20161108_10.png