HTML判断条件优先级,CSS优先级算法如何计算？有哪些判定规定及计算方式

CSS优先级算法如何计算？有哪些判定规定及计算方式

发布时间：2014-05-29 16:15:17   作者：佚名   我要评论

CSS 的specificity是一个衡量CSS值优先级的一个标准，具有一套相关的判定规定及计算方式，下面为大家详细介绍下

关于CSS specificity

CSS 的specificity 特性或称非凡性，它是一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。

选择符Specificity值列表：

规则：

1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。

如：

sjweb

外部定义指经由或

2.!important声明的Specificity值最高；

3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；

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

!important 的优先级最高

相关文章

这篇文章主要介绍了纯 CSS 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-13

这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-10-12

这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-12

这篇文章主要介绍了CSS两种常用的封装示例，帮助大家更好的利用CSS制作网页，感兴趣的朋友可以了解下2020-10-12

这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-12

这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09

这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09

这篇文章给大家介绍了CSS中width和height的默认值auto与%案例，本文通过实例案例给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-09-30

这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-28

这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-28

最新评论