Css选择器及其优先级

来源：意榕旅游网

Css选择器及优先级

选择器

(1) 类选择器 .class

最常用的选择器，一个标签可引用多个class 一个class也可被多个标签使用。

(2) ID选择器 #ID

优先级很高的选择器,但一个页面的标签们只能有一个相同的ID，一个标签也只能有一个ID。

(3) 标签选择器 p

为所有同标签设置统一样式。优先级低，常用于reset.css

(4) 属性选择器 a[href]

根据[]中信息匹配，不支持ie6、7

(5)后代选择器 .class p、#ID p、.class .child、 ul li

为所选标签下所有某一类型的所有后代元素（包括儿子，孙子）添加样式。

(6) 子选择器 .class>p

为所选标签下所有某一类型的儿子元素添加样式。

优先级

先罗列几种优先级情况

!Important #id .class p .class p p.class .class>p

!important 毋庸置疑的最高（ie6不支持）

然后是#ID

然后是.class

最低当然是标签选择器

但现在要看后代选择器、类选择器、标签选择器混用的情况了~

如果定义了 .red p{backgrund:red} .blue{background:blue}

显示红色

但如果加上p.blue{background:blue}则背景会是蓝色。

.red p 和p.blue 他们是同级的，谁在下边谁的优先级高。和子选择器也同级。

如果写成.red p.blue{background:blue}或.red .blue{}则优先级已经高出一级了。

所以排序是 .red p.blue >.red .blue > .red p; p.blue>.blue>p By liuh

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文