css知多少——选择器的优先级(转)

coael      2022-02-10     351

关键词:

css知多少(6)——选择器的优先级

 

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

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

欢迎关注我的教程:

用grunt搭建自动化的web前端开发环境从设计到模式深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频

也欢迎关注我的开源项目——wangEditor,简洁易用的web富文本编辑器

css知多少——选择器(转)

1.引言  从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器。  CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器。让浏览器知道css选择了哪一个dom节点,浏览... 查看详情

基础篇css你知道多少?(代码片段)

...一件事情。下面就让我把工作中遇到问题分享给大家。css优先级先看下图优先级选择器的优先权解释说明内联样式表的权值最高1000。ID选择器的权值为100。Class类选择器的权值为10。HTML标签(类型)选择器的权值为1。!important权... 查看详情

css知多少——float下篇(转)

  float内容比较多,咱们分上、下两篇来介绍,上篇已经写完,这是下篇。建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊。1.清除float  《上篇》中我们提到,float具有“破坏性”,它会导致父元素“坍塌”,这... 查看详情

css选择器的优先级

 其中!import不算做选择器,他只是把样式的优先级提高。 查看详情

css选择器的优先级-css选择器世界

1对于优先级的计算,数值计数法:每一段css语句的选择器都对应一个具体的数值,数值越大,优先级越高,其中的css语句将被优先渲染。其中:出现一个0级选择器,优先级数值+0;出现一个1级选择器,优先级数值+1;出现一个2... 查看详情

css选择器的优先级

选择器的优先级表述为4个部分,用0,0,0,0表示。!important行间--1,0,0,0ID选择器--0,1,0,0类选择器(例如,.example)、属性选择器(例如, [type="radio"])或伪类(例如,:hover)--0,0,1,0元素(例如,h1)和伪元素(例如,:before)--0,0,0,1通配选择... 查看详情

前端学习--css--选择器的优先级

...冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示。 优先级的规则 内联样式,优先级1000 id选择器,优先级100 类和伪类,优先级10 元素选择器,优先级1 通配*,优先级0 继承的... 查看详情

css选择器的优先级

...看地址(https://www.cnblogs.com/hleisurely/p/12836777.html)1.选择器的优先级!important的优先级别最高权重值为1111用来提升某个直接选中标签的选择器中某个属性的优先级的,可以将被指定的属性的优先级提升为最高第一等级:内联样式如:sty... 查看详情

css选择器的优先级问题

原文:css选择器的优先级问题  当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢?  定义的属性有冲突时,浏... 查看详情

css选择器的优先级

1.首先介绍一下CSS内联  内联css也叫做行级css或行内css,它是直接在标签内使用1<body>2<spanstyle="color:red;">我是span块</span>3</body>2.各种选择器标签选择器:点击这里了解标签选择器ID选择器:点击这里了解ID选择... 查看详情

css选择器的优先级

  !important作为优先级最高的选择器,在样式仍然有冲突的情况下,依旧要按照优先级顺序进行比较  -----选择器优先级顺序为: !important>行内样式>ID选择器>类选择器、伪类选择器>元素、为元素、属性选择器>通配... 查看详情

css选择器的优先级及权重问题css核心问题

1.CSS选择器优先级:  !important>行间样式>id>class和属性选择器>标签选择器>通配符选择器    注意:[初级工程师水平]2.之所以有优先级问题,归根到底是这些选择器有权重的,权重值越大,优先级越... 查看详情

css选择器的优先级

版权声明:本文为博主原创文章,未经博主允许不得转载。 Css01一、CSS简介  a)CascadingStyleSheets层叠样式表(级联样式表)  b)是一个文本文件,不需要编译由浏览器直接执行  c)作用是定义网页外观如字体,背景,等。。... 查看详情

css样式表{二}

1选择器的优先级  选择器的优先主要考虑选择器的权重  可以将各种选择器的权重以数值来表示,数值越大,优先级越高  选择器权重值标签selector1类选择器10ID选择器100行内样式1000    复杂选择器优先级的计算... 查看详情

css强制优先级

...值为10。HTML 标签(类型)选择器的权值为1。 CSS优先级顺序下列是一份优先级逐级增加的选择器列表:通用选择器元素(类型)选择器类选择器属性选择器 查看详情

css选择器有哪些,选择器的权重的优先级

1.选择器类型1、ID  #id2、class  .class3、标签  p4、通用  *5、属性  [type="text"]6、伪类  :hover7、伪元素  ::first-line8、子选择器、相邻选择器2.权重计算规则1. 第一等:代表内联样式,如:style=””,权值... 查看详情

css选择器的权重与优先规

我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。4个等级的定义如下:第一等:代表内联样式,如:style=””,... 查看详情

css声明的优先级

选择器的特殊性   选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如0,0,0,0,0   一个选择器的具体特殊性如下确定   1、对于选择器给定的ID属性值,加0,1,0,0   2、对于选择器中给定的各个类属... 查看详情