css 选择器优先级的计算过程

以下转自互联网

下面看看官方对选择器的定义:
一个选择器的优先级由四个数字a,b,c,d确定。当比较两个选择器时,先比较a,a值大的优先级高,如果a相等则比较b,b值大的优先级高,以此类推。因此,无论b的值多大,也不会对a值的比较造成影响。
a由style确定,如果一个属性由元素上的style属性定义则a为1,否则a为0
b是id的数量
c是class和伪类以及属性的数量
d是tagname以及伪元素的数量

按照这个规则,我们来看看下面这个选择器的优先级:
 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

时间: 2024-09-30 01:57:21

css 选择器优先级的计算过程的相关文章

深入理解CSS选择器优先级的计算

选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是这样描述的: 如果声明来自于“style”属性,而不是带有选择器的规则,则记为 1,否则记为 0 (= a)(HTML元素的style属性也是样式规则,因为这些样式规则没有选择器,因此记为a=1,b=0,c=0,d=0) 计算选择器中 ID 属性的个数 (= b) 计算选择器中其他属性(类.属性选择

CSS选择器优先级的计算

问: a:link/a:visited 为什么优先级比class高? 查看示例: http://jsbin.com/iRiFUbu/1/在Chrome(30.0.1599.69),IE 10,Firefox 25.0上见到链接是红色(a:link)而不是黄色(.test) 想请问,为什么?请问w3c标准是怎么说明的?如果可能请列出w3c的标准说明网址. 参考:Assigning property values, Cascading, and InheritanceSelectors Level

CSS选择器优先级【转】

样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 示例如下: <head>     <style type="text/css&

CSS选择器优先级(转)

原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/TR/css3-selectors/#specificity 1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span

css选择器 优先级的问题

最近写代码时发现,有时候写出的样式不会被引用.看了一些其他人写的网站源码后,我发现了这样写可以解决问题,如下: 比如说<div class="abc">  <div class="edf">     <div class="fgg">    </div>  </div></div>确定class="fgg"时,写成:.abc .efg .fgg{/* 代码

CSS总结(四)—— CSS选择器优先级

css选择器优先级 优先顺序: 1.!important (IE6不支持此属性) 2.html中元素标签添加的style=“”(css难以管理,不推荐) 3.一个或多个id选择器 例:#top{margin:0;} 4.一个或多个类选择器(包括属性.伪类选择器) 例:.outer{}   [data-job="frontend"]{}    a:active{} 5.标签选择器 例:div{margin:3px;} 6.通配选择器 例:*{margin:10px;} ★ 选择器规则:

一道关于CSS选择器优先级的题

<span style="font-size:14px;"><html> <head> <style type="text/css"> #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red em { /* 权值 = 100+10+1=111 */ color:#00F; /* 蓝色 */ } #redP p span em { /* 权值 =

CSS选择器优先级比较

CSS选择器的优先级,一般根据就近原则,更准确一点,根据选择器的权值大小比较,权值越高,则优先级越高.如果加上!important则优先级最高. 权值大小: !important 1000 id 100 class 10 属性 10 伪类 10 伪元素 10 标签 1 通配符* 0

导航栏布局时遇到的问题以及解决办法 css选择器优先级

得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下效果 或者可以使用第二种方法 #menu ul li{ float:left; margin-left:10px;text-align:center;padding-left:10px;实现列表项文字的居中 line-height:28px; height:28px; width:40px; bor