CSS优先级详解(权重详解)

CSS选择器权重值的计算

对于Css权重,现在网上很多版本都是这样计算的:内联样式1000点,ID100点,Class、伪类(pseudo-classes)或属性选择器10点,标签元素和伪元素(pseudo-elements)1点;虽然大多数时候是正确的但因为真正的原理并非如此,所以某些情况下会出错。

css权重有ABCD四个值,A代表行间样式,B代表选择器中ID的数量,C代表选择器中类, 伪类, 属性选择器的数量,D代表标签元素和伪元素的数量。

具体理解请看例子:

  • *      {}   A,B,C,D(0,0,0,0)
  • li      {}   A,B,C,D(0,0,0,1)
  • li .active   {}   A,B,C,D(0,0,1,1)
  • div #bid   {}   A,B,C,D(0,1,0,1)
  • style=”"       A,B,C,D(1,0,0,0)
  • li:first-line  {}     A,B,C,D(0,0,0,2)
  • ul#nav li.active a   A,B,C,D(0,1,1,3)
  • #big *:not(nav) li  A,B,C,D(0,1,0,2) 错误:A,B,C,D(0,1,1,2)
  • 注意:伪类中“ :not() ”本身不计权重值,而在其括号里的则相应设定权重值!

显示样式时,多组从A到D依次比较,结果不相等则显示数值较大的;否则,如果A相同,比较B,如果B相同,比较C,如果C相同,比较D,如果D相同,后定义的优先。

错误与正确方法计算的演示

样式一:body header div nav ul li div p a span em {color: red}

样式二:.count {color: blue}

若按照本文开始提到的计算方式,给每个ABCD分配点数,则样式一的权重值是11,样式二的权重值是10,如果这两条规则用于同一个元素,则该元素应该是红色,实际结果却是蓝色。

按照正确的计算方式:样式一的权重为(0,0,0,11),样式二的权重为(0,0,1,0),A、B相同,C组样式二大于样式一,所以显示样式二的规则。

权重中的大BOSS

以上计算均为正常情况,而对于!important来说,其凌驾于所有规则之上。

CSS2规范中规定:!important 用于单独指定某条样式中的单个属性。对于被指定的属性,有 !important 指定的权重值大于所有未用 !important 指定的规则。

样式一: #header {color: red; font-weight: bold;}

样式二: .header {color: blue !important; font-weight: normal;}

在以上样式中,字体颜色本该是红色,由于使用了!important所以字体颜色为蓝色,而font-weight则按照规定使用样式一的规则。

如果多条规则中都对同一个属性指定了 !important,则在指定 !important 规则的这些选择器中,按照CSS权重计算结果进行显示。

例子:

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
            color: blue !important;
        }
    </style>
</head>
<body>
    <div id="div1" class="div1" style="height: 200px;color: pink;">
        <p id="active">hsahuishau</p>
        <p>hfduihif</p>
    </div>
</body>
</html>

外部样式表 style.css 代码

.div1 {
    width: 300px;
    height: 300px;
    background-color: green;
    color: yellow !important;
}

运行结果为:

字体颜色忽略了行间样式pink,在blue和yellow中按照权重计算结果显示为blue。

因此 !important 的作用只有在具有唯一性时才能提现,所以使用 !important要慎重。

CSS多重样式

看了以上CSS优先级的计算,有些小伙伴可能会认为执行了某一样式表中的样式其他样式将不执行,其实以上覆盖执行是发生在同一个 HTML 元素被不止一个样式定义时。对于未被重复定义的样式将正常执行。

例如,外部样式表拥有针对 h3 选择器的三个属性:

h3 {
color:red;
text-align:left;
font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性:

h3 {
text-align:right;
font-size:20pt;
}

最终h3 得到的样式是:

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。

参考资料:http://www.cnblogs.com/mizzle/archive/2012/12/06/2804378.html

     http://www.cnblogs.com/xuyongsky1234/p/4157575.html

     http://www.runoob.com/css/css-howto.html

转载请注明出处:丝瓜 ? CSS优先级详解(权重详解)

时间: 05-18

CSS优先级详解(权重详解)的相关文章

CSS中选择器优先级与!important权重使用

原文:CSS中选择器优先级与!important权重使用 CSS中的选择器优先级与!important权重使用# .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重值优先级最高的,大于所有的选择器. 标签选择器和.class选择器# 让我们进入标签选择器和.class选择器谁的优先级高实践,实践内容如:将HTML页面中的h2标签设置文本颜色. 代码块 Copy <!DOCTYPE html> <

浅谈CSS优先级机制(一)

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

CSS/优先级

css的优先级 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 样式表中的特殊性描述了不同规则的相对权重,它的基本规则是: 1 内联样式表的权值最高               style=""------------1000: 2 统计选择符中的ID属性个数.       #id --------------100 3 统计选择符中的CLASS属性个数. .class -------------10 4 统计选择符中的HTML标签名个数. p ------------

css优先级和层叠

css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择器的数量    假设a,b,c,d的权重分别为1000,100,10,1    那么有: 2.css层叠 了解了css的优先级,这时候我们就不得不提css中的层叠(此时考虑的还不涉及到z-index),我们应该知道如下几点:        1.当优先级相同,属性名相同时,后面的样式会覆盖前面的样式 

关于CSS的优先级,CSS优先级计算

原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权重计算法 CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数! 根据这四个级别出现的次数计算得到CSS的优先级. CSS优先级的计算规则如下:* 元素标签中定义的样式(Style属性),加1,0,0,0* 每个ID选择符(如 #id),加0,1,0,0* 每

css 优先级的bug

对于前端而言,了解css样式的优先级,对开发或处理bug有着事半功倍的效果,今天在做项目的时候,突然碰到一个优先级的小问题,刚开始不知道所因,后来才发现这个问题是由优先级造成的.先描述下问题,鼠标悬停在父容器时,子容器显示,移开消失.看到这个问题,可能有些人要喷了,这和优先级有毛线关系,看起来的确没关系,其实还是存在一定关系的.假如你在书写子容器样式时,采用的是内联式写法,那么这个悬停是否还有作用呢?看下面的代码-- 示例代码 <!DOCTYPE html> <html> <

css优先级计算规则

原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没有然后了……,ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级,但是外联样式优先级并不一定低于内联样式优先级.做为一个合格的前端工程师,让我们彻底搞清楚css优先级计算规则吧! 特殊性 css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏

day4(css优先级)

参考博客: http://www.cnblogs.com/yuanchenqi/articles/6856399.html css属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*.c1[po*="p"]{*/ /*color

CSS优先级和定位

overflow属性 hidden scroll auto hidden 超出隐藏 scroll 滚动条 Auto 自动 display属性 block inline inline-block none Block 块显示 inline 按行内显示 inline-block 双重作用.既有行的特点又有块的特点 在一行内显示,又具有宽高.   None 不显示. Display:none;   CSS引入的方式 行内,内嵌,外部 行内 在标签内部,直接使用style="CSS规则" 容易