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>到底听从谁的命令?

  上面还是比较简单的,下面在来一个复杂的:

  

  上图中的<li>该显示成什么颜色呢?

2. 特指度

  要解决以上问题,我们需要引入一个概念——特指度(specificity)。特指度表示一个css选择器表达式的重要程度,可以通过一个公式来计算出一个数值,数越大,越重要。

  这个计算叫做“I-C-E”计算公式,

  1. I——Id;
  2. C——Class;
  3. E——Element;

  即,针对一个css选择器表达式,遇到一个id就往特指度数值中加100,遇到一个class就往特指度数值中加10,遇到一个element就往特指度数值中加1。

  下面举几个css表达式的特指度计算结果,大家也自己算一算,是不是对:


CSS选择器表达式


特指度计算结果


p


1


p.large


11


P#large


101


div p#large


102


div p#large ul.list


113


div p#large ul.list li


114

  还有一个重点要注意:!important优先级最高,高于上面一切。* 选择器最低,低于一切。

  好了,你现在可以返回文章一开始提出的两个问题,根据特指度计算公式计算,哪个的计算结果大,浏览器就会以哪个为优先。

3. 简版规则

  如果你嫌上面的计算过于复杂,有一个简版规则。它只有三个规则,这三个规则能覆盖大多数情况,而且比较好记。

  规则一,包含ID的选择器胜过包含Class的选择器,包含Class的选择器胜过包含元素的选择器;例如下图,第一个特指度更高:

  

  规则二,不同选择器的特指度比较时,不区分加载的顺序(相同选择器在层叠时,后加载的覆盖前加载的),例如下图,虽然后加载,但是特指度低:

  

  规则三,设置的样式高于继承的样式,不用考虑特指度。例如:

  其实,大部分情况下,你通过这个简版的规则,即可判断选择器的优先级。

4. 亲身经历

  wangEditor是我自己做的一个富文本编辑器,当我最开始在博客园上配置demo页面的时候,就遇到了css选择器优先级的问题,现在已经解决。Demo地址:http://www.cnblogs.com/wangfupeng1988/p/4198428.html

  对于下来菜单,例如选择字体、字号等,我当时在wangEditor的css中是用Class来设置的,谁知道博客园页面中有一个既有的样式,优先级高于我的:

  

  导致了我配置的demo中,ul的margin-left还是45px,而我写的css明明已经设置成了0px。原因就是博客园这个css选择器优先级要高于我写的优先级。

  当然,后来我改成了id选择器,就改过了这个问题。

5. 总结

  本节的内容是一个重点,我在许多的面试题中看到过考css优先级的问题。css优先级并不麻烦,只要你掌握了合适的方法来学习,一晚上就入门个差不多,祝君好运。

---------------------------------------------------------------

本系列的目录页面:http://www.cnblogs.com/wangfupeng1988/p/4325007.html

时间: 2024-10-25 00:45:13

CSS选择器优先级(转)的相关文章

CSS选择器优先级【转】

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

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

深入理解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选择器优先级总结

CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") 3.ID选择器(如:id="name",id="name_t

CSS 选择器优先级

1. CSS选择器判断过程: 第一步:判断选择器的权重(多重组合样式同理,多个class<一个id); 权重从大到小依次为: !import 元素行内样式 ID选择器 伪类选择器/属性选择器>类选择器 tag标签选择器 *通配符 继承 第二步: 同种类型的权重判断选择器的顺序 同种类型的权重不同层数,组合层数多的 > 组合层数少的 同种类型的权重同等层数,后定义的 > 先定义的 2.实例 (1). 单个选择器,不同权重 //HTML <div class='stylePare