css 权重 特殊性

选择器的特异性由 CSS2 规范定义如下:

!important的规则比其他的权值都大     p{color: red !important}

  • 如果声明来自于“style”属性,而不是带有选择器的规则,则记为 1,否则记为 0 (= a)
  • ID 属性的个数 ( b)
  • 其他属性和伪类的个数 ( c)
  • 元素名称和伪元素的个数 ( d)

将四个数字按 a-b-c-d 这样连接起来(位于大数进制的数字系统中),构成特异性。

一些示例:

*             {}  /* 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 */

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

内联样式即写在style内的样式

当多个规则应用于同一个元素时,权重越高的将会优先采用,(赋予256个class 的话权重大于 id)

参考:http://cssn.in/ja/043

样式层叠

如果一个元素的两条规则具有同样的权值,特殊性和起源,那么应用后面那个

文档中的规则比引入的规则权值大

元素的style 属性被认为是在样式表的末尾,因此和id 冲突时优先使用

根据 CSS2 规范,层叠的顺序为(优先级从低到高):

浏览器声明

用户普通声明

作者普通声明

作者重要声明

用户重要声明

时间: 2024-10-24 02:55:20

css 权重 特殊性的相关文章

CSS权重

之前面试碰到的一个题,也算是面试的常见题吧,如下: 说出两个h2的颜色 这个题目考察的就是css权重,参考大漠老师的译文:http://www.w3cplus.com/css/css-specificity-things-you-should-know.html 权重计算公式:从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1.著作权归作者所有. 所以#content div#main-content h2的权重是100*2

css权重计算方法浅谈

在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很大帮助. 从css代码存放的位置来看,权重计算当然是--->内嵌样式 > 内部样式表 > 外联样式表!然而工作中我们的css代码都是写在外联样式表中的咯. 参考w3c样式选择器权重优先级是这个样子的 important > 内嵌样式 > ID > 类 > 标签 | 伪

[ css 权重 !important ] 使用CSS的!important讲解及实例演示

/** 楔子: !important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权(参见:W3.org的解释). 语法格式{ sRule!important },直接写在定义的最后面,如: p{color:green !important;} 注意:IE一直都不支持这个语法,而其他的浏览器都支持.因此我们就可以利用这一点来分别给FF和IE浏览器样式定义. <html> <head> <style type="text/css"> #box

css权重 vs 浏览器渲染 -- css之弊病

昨日,突现一个bug,令人十分恼火. 基本场景 自己实现一多选日历,可多选多天(相连或不相连均可),"贵司"的需求真心有些小复杂了,"市面"上没有这种类似的东东啊 Bug场景 鼠标悬浮到day上时,显示暗灰色,然后点击day的背景变为淡蓝色,问题就出现在这了,当鼠标悬浮的时候此时背景色为暗灰色,但是点击后仍然是暗灰色,只有当鼠标移开这个day的时候才会真正改变背景色 也就是说其实已经发生作用了,但是css并未真正发生作用 纠错历程 起初首先想到的是css权重问题 第

CSS Specificity(特殊性)

CSS的特殊性是非常重要却又经常被忽视的属性,特别是在团队合作下的产品迭代开发中,因为不注重CSS的特殊性最后导致某些代码混乱不堪,这里就把自己对CSS特殊性的认识做一些归纳总结. CSS的特殊性(specificity)也可以称为CSS的优先级或权值:对于每个样式表规则,浏览器都会计算选择器的特殊性,从而使元素属性声明在有冲突的情况下能够正确显示. 特殊性的描述可以把它看成一个4位数: 0.0.0.0 ,数值越大的特殊性越高(例如:0.1.0.0>0.0.1.2),也是最终浏览器显示的效果.

CSS:权重和层叠规则决定了其优先级

来源:http://www.ido321.com/1063.html 首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 >  通配符 > 继承 二.CSS权重规则        在<页面重构中的模块化

CSS权重是如何分配的

CSS权重是如何分配的 CSS权重是由四个数值决定,看一张图比较好解释: 图里是英文的,我翻译过来分别说一下,4个等级的定义如下: 第一等:代表内联样式,如: style=””,权值为1000. 第二等:代表ID选择器,如:#content,权值为100. 第三等:代表类,伪类和属性选择器,如.content,权值为10. 第四等:代表类型选择器和伪元素选择器,如div p,权值为1. 最后把这些值加起来,再就是当前元素的权重了. 权重算出来了,但是某个元素到底用哪个样式,还有3个规则,: 1,

Css权重解析

Css权重解析 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下: specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越. 继承或者* 的贡献值 0,0,0,0 每个元素(标签)贡献值为 0,0,0,1 每个类,伪类贡献值为 0,0,1,0 每个ID贡献值为 0,1,0,0

css权重问题

权重决定了你css规则怎样被浏览器解析直到生效.“css权重关系到你的css规则是怎样显示的 权重记忆口诀.从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1 类型 权重 ! important 无穷 行间样式 1000 id 100 class/属性选择器/伪类:hover 10 标签选择器/伪元素:after 1 通配符 0 01. *{} ====>0 02. li{} ====>1(一个元素) 03. li:firs