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}

<div         class=”red”>

<p class="blue">显示红色</p>

</div>

但如果加上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

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！