详解CSS优先级的读法

你对对CSS优先级的读法是否熟悉，这里和大家分享一下，CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。

为银州等地区用户提供了全套网页设计制作服务，及银州网站建设行业解决方案。主营业务为网站设计制作、成都做网站、银州网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

CSS进阶：详解CSS优先级的读法

最近看到篇对CSS优先级有比较好的解释的blog，转载过来供大家学习参考。详解CSS优先级的读法，CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。

　　对CSS优先级的读法，应该是以“组”来分，这个组之间相互独立，从左到右进行对比。它们成组出现，以逗号分隔。

ExampleSourceCode

 
 
  
  selector(a,b,c,d)  
  
   
  
  compare:↑,↑,↑,↑

　　selector(a,b,c,d)正如w3c.org中原文所示，分为a,b,c,d四组，全为正整娄，默认为0，对应于不同的选择器结构和组成形式。在选择器之间的优先级进行对比时，从左到右1对1对比，当比出有大者时即可停止比较。

ExampleSourceCode

 
 
  
  li.red.level{}/*a=0b=0c=2d=1->specificity=0,0,2,1*/  
  
  /*compare↑,↑,√*/  
  
  h1+*[rel=up]{}/*a=0b=0c=1d=1->specificity=0,0,1,1*/  
  
  /*compare↑,↑,↑,√*/  
  
  ulolli.red{}/*a=0b=0c=1d=3->specificity=0,0,1,3*/  
  
  /*compare↑,↑,√*/  
  
  #x34y{}/*a=0b=1c=0d=0->specificity=0,1,0,0*/  
  
  /*compare↑,√*/  
  
  style=""/*a=1b=0c=0d=0->specificity=1,0,0,0*/

(上表中，↑表示还要进行比较，√表示从此处已得到了结果)

　　再有，只要正确书写，仅从优先级中大概知道选择器结构形式了，如：

　　1,0,0,0表示是元素内的style；

　　0,2,1,1表示是一个由两个ID选择器，1个类或伪类或属性选择器，以及一个元素选择器组成的选择器。#p#

CSS优先级规则的细节：

　　在纠正读法后，才能开始讲详细的规则：

　　a组数值只有把CSS写进style属性时才会为1,否则为0.写进style的样式声明其实不算是个选择器，所以这里面的b,c,d组值均为0，只有真正的选择器才会有b,c,d组值。

　　b组数值决定于ID选择器#ID，有多少个ID选择器，并会进行此组数值累加；

　　c组数值决定于类、伪类和属性选择符，并会进行该组数值累加；

　　d组数值决定于元素名，即元素选择器，并会进行该组数值累加；

　　注意，这四组数值分别对应于不同类型的选择器，互不影响，根据读法法则进行比较。这里没有讨论到!important，就近原则和继承，也没有实例代码，欢迎大家来W3Cbbs.com共同讨论！

下面是列子：CSS优先级问题

　　CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。

　　CSS优先级的计算规则如下：

◆页面中定义的样式,加1,0,0,0

◆每个ID选择符(如#id),加0,1,0,0

◆每个Class选择符(如.class)、每个属性选择符(如[attribute=])、每个伪类(如:hover)加0,0,1,0

◆每个元素选择符（如p）或伪元素选择符(如:firstchild)等，加0,0,0,1

　　然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。
　　
例子：
　　CSS文件或

标题名称：详解CSS优先级的读法
本文路径：http://www.shufengxianlan.com/qtweb/news37/215987.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容