CSS优先级算法是如何计算?

CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准,

既然的标准就有判定规定和计算方式,specificity用一个四位数来表示,

更像四级从左到右,左的最大级,一级大于一级,数位之间没有进制,

多个选择符用到同一个元素上时那么specificity上值高的最终获得优先级。

css specificity

规则

1、行内样式优先级specificity值为1,0,0,0 高于外部定义

  如<div style="height:50px; width:50px;">Div</div>  //行内样式

  外部定义指经由<link>或<style>标签定义的规则

2、按CSS代码中出现的顺序决定,后者CSS样式居上;(近水楼台 先得月)

3、!important声明specificity值优先级最高

4、由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义规则)

算法:

当遇到多个选择符同时出现时候 
按选择符得到的Specificity值逐位相加, 
{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0} 
就得到最终计算得的specificity, 
然后在比较取舍时按照从左到右的顺序逐位比较。

实例分析:

1.div { font-size:12px;} 
分析: 
1个元素{ div},Specificity值为0,0,0,1

2.body div p{color: green;} 
分析: 
3个元素{ body div p },Specificity值为0,0,0,3

3.div .sjweb{ font-size:12px;} 
分析: 
1个元素{ div },Specificity值为0,0,0,1 
1个类选择符{.sjweb},Specificity值为0,0,1, 0 
最终:Specificity值为 0,0,1,1

4.Div # sjweb { font-size:12px;} 
分析: 
1个元素{ div },Specificity值为0,0,0,1 
1个类选择符{.sjweb},Specificity值为0,1,0, 0 
最终:Specificity值为 0,1,0,1

5.html > body div [id=”totals”] ul li > p {color:red;} 
分析: 
6个元素{ html body div ul li p} Specificity值为0,0,0,6 
1个属性选择符{ [id=”totals”] } Specificity值为0,0,1,0 
2个其他选择符{ > > } Specificity值为0,0,0,0 
最终:Specificity值为 0,0,1,6

时间: 2024-12-19 18:37:36

CSS优先级算法是如何计算?的相关文章

CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?

1.CSS选择符有哪些? 类型选择符(body).群组选择符(h1,h2,h3,span).包含选择符(h2 span).ID选择符(#id).Class选择符(.content) 2.哪些属性可以继承? CLASS属性,伪类A标签,列表ul.li.dl.dd.dt可以继承 3.优先级算法如何计算? 优先级就近原则 版权声明:本文为博主原创文章,未经博主允许不得转载.

css选择器有哪些?哪些属性可以继承?优先级算法如何计算?新增的伪类有哪些?

一,css选择器: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选择器( * ) 8.属性选择器(a[rel = "external"]) 9.伪类选择器(a:hover, li:nth-child) 二,继承问题: * 可继承的样式: font-size font-family color, UL LI D

CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) 2)      类选择器(.myclassname) 3)      标签选择器(div, h1, p) 4)      相邻选择器(h1 + p) 5)      子选择器(ul > li) 6)      后代选择器(li a) 7)      通配符选择器( * ) 8)      属性选择器

浅谈CSS优先级机制(一)

初次写随笔,如果有哪个地方不足还望大神指点改正,下面我来谈谈我对于CSS优先级的了解吧. CSS优先级,通俗的理解就是你给元素等一堆属性描述,然后最后到底是哪个描述作为最终显示的效果的规则或机制(个人理解).以下我将分为几个点来谈谈优先级的确定. 1.引入方式: CSS引入的方式,我目前只知道四种:内联式.内嵌式.导入式.链接式(当然网上的说法名称不一,理解就好). 各种引入方式的用法我在这里就不再多说了.以上我所按顺序罗列的四个方式是理论上的优先级顺序,也就是说,我使用内联式引入的css代码作

css 优先级 机制

多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 选择器的优先权--->权值 内联样式---1000: ID选择器----100:class选择器---10: 标签

css优先级

自适应布局 1.适应场景是:左右两列,一列设置浮动和设置宽度,另一列不需要设置浮动和宽度,只需设置overflow:hidden,就可以实现左右两列自适应.原理(BFC,清除浮动原理) 伪类与伪对象 在官方文档中伪类用classify来描述,而伪对象用create.从这里我们就能明白它们的区别: 伪对象则代表了某个元素的子对象,这个子对象虽然在逻辑上存在,但却并不实际存在于文档树中. 就像上文中的first-line,在DOM中其实并不存在.我们经常用的:before :after也属于伪对象.

css优先级汇总

我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴.优先级的顺序为内联样式>内部样式>外部样式. <head> <link href="style.css" rel="stylesheet" type="text/css" /> /*.color{color:red;}外部样式*/ &l

css优先级机制

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style  >(内部样式)Internal style sheet >(外部样式)External style sheet (有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式.) 2.CSS选择器优先级:id选择器优先级 > 类class选择器优先级 > 标签选择器优先级 1.文内的样式优先级为1,0,0,0,所以始终高于外部定义.

css优先级计算

主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同情况的优先级以数字的形式来表示的话,其对应关系如下: !important(10000) > 内联样式(1000) > id(100) > class(10) > tag(1) 则通常的css优先级比较可转化为数值大小的比较,如:#list li和.list .content ul l