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