01 CSS-选择器

CSS基础选择器

• 标签选择器：所有标签名都可以当做选择器，比如body、h1、dl、ul、span等等
• id选择器： 同一个页面内id不能重复（一般是JS中用ID选择器）
• 类选择器：任何的标签都可以携带class属性，class属性可以重复（CSS尽量用类选择器）

CSS高级选择器

• 后代选择器：空格表示。选择的是后代，不一定是儿子
• 交集选择器：选择的元素是同时满足两个条件,一般都是以标签名开头。

    //选择的元素是同时满足两个条件，必须是h3标签，必须是special类
     h3.special{
        color:red;
     }

• 并集选择器（分组选择器）：逗号表示

  h3,li{
      color:red;
  }
  

• 通配符*：星号表示所有的元素

兼容问题

IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。

• windows xp 操作系统安装的IE6
• windows vista 操作系统安装的IE7
• windows 7 操作系统安装的IE8
• windows 8 操作系统安装的IE9
• windows10 操作系统安装的edge

浏览器兼容问题，基本上都是出在IE6、7身上，这两个浏览器是非常低级的浏览器

一些CSS3选择器

• 儿子选择器：>表示 （IE7开始兼容，IE6不兼容）

• 序选择器：（IE8开始兼容；IE6、7都不兼容）

  //选择第一个li 
  ul li:first-child{ 
  color:red; 
  }

• 下一个兄弟选择器：+表示选择下一个兄弟 （IE7开始兼容，IE6不兼容。）

  //选择上的是h3元素后面紧挨着的第一个兄弟。
  h3+p{
      color:red;
  }
  
      <h3>我是一个标题</h3>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <h3>我是一个标题</h3>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
  

总结

下列都是IE6兼容的选择器：

 标签选择器    p
 ID选择器    #box   
 类选择器     .spec   
 交集选择器    div.box
 后代选择器    div .box
 并集选择器    div , .box
 通配符        *

下列都是IE7开始兼容的选择器：

 儿子选择器       div>p
 下一个兄弟选择器  div+p

下列都是IE8开始兼容的选择器：

 div p:first-child
 div p:last-child