为什么要写这篇文章是因为

<style type="text/css">

body h1 {

  color: green;

}

html h1 {

  color: purple;

}

</style><body>

   <h1>Here is a title!</h1>

</body>

上面代码执行结果是这样的。按照我的理解，body在DOM中比html近，应该会按body h1中定义的绿色来显示文字，但是恰恰相反，文字颜色是紫色的。

原因现在我当然是知道的，因为css中优先级无视DOM树中节点的距离远近，就是说DOM树中的距离不会对元素优先级计算产生影响。如果优先级相同，靠后的 CSS 会应用到元素上。而html h1靠后，当然是紫色了，如果调换html h1和body h1顺序那就是绿色了。

以上我刚开始犯的错误，其实是被继承样式给唬住了，但是继承的样式是低于设定的样式的。如果只是继承，那离的近的当然优先级高，比如举个例子：

<style type="text/css">

#close{

    color: green;

}

#further{

    color: purple;

}

</style><body>

<div id="further">

<div id="close">

   <h1>Here is a title!</h1>

</div>

</div>

</body>

不管#close和#further顺序，文字都是绿色的。

接下来就系统的看看css优先级。

一、优先级

浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。

内联》ID选择器》伪类=属性选择器=类选择器》元素选择器【p】》通用选择器(*)》继承的样式

二、优先级计算：

上面说了，优先级仅有选择器决定，怎么个计算方法呢？

a、用a表示选择器中ID选择器出现的次数

b、用b表示类选择器，属性选择器和伪类选择器出现的总次数。

c、用c表示标签选择器、伪元素选择器出现的总次数

d、忽略通用选择器

e、然后计算a*100+b*10+c的大小，这就是优先级了。

权重：内联样式1000》id选择器100》class选择器10》标签选择器1

Note:

ID选择器「如：#header」，Class选择器「如：.foo」，属性选择器「如：[class]」，伪类「如：:link」，标签选择器「如：h1」，伪元素「如：:after」，选择器「*」

接下来从以下几点深入分析优先级。

1、优先级计算无视DOM树中的距离

开头说明的例子：

<!DOCTYPE html>

<html>

<style type="text/css">

body h1 {

  color: green;

}

html h1 {

  color: purple;

}

</style>

</head>

<body>

<h1>Here is a title!</h1>

</html>

body h1和html h1的优先级相同。

2、伪类选择器，属性选择器和class选择器的优先级一样【update20170422】

伪类=属性选择器=类选择器

所以后面的会覆盖前面的。

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<style type="text/css">

    :focus {

        color: red;

    }

    [class] {

        color: blue;

    }

    .classtest {

        color: green;

    }

</style>

</head>

<body>

<div class="classtest">

    什么颜色文字

</div>

</body>

</html>

如下图类选择器在后，所以覆盖前面的样式，所以文字绿色。

如下图属性选择器在后，会覆盖前面的类选择器样式，所以文本蓝色。

focus同理，只有放后面才生效，否则会被伪类和属性选择器覆盖

3、基于类型的优先级

优先级是根据选择器的类型进行计算的。

举例：属性选择器尽管选择了一个ID但是在优先级计算中还是根据类型计算，因此即使选择的是相同的元素，但ID选择器有更高的优先级，所以* #foo设置的样式生效。

<!DOCTYPE html>

<html>

<style type="text/css">

* #foo {

  color: green;

}

*[id="foo"] {

  color: purple;

}

</style>

</head>

<body>

<p id="foo">I am a sample text.</p>

</body>

</html>

4、：not伪类不参与优先级计

【：not】否定伪类在优先级计算中不会被看做是伪类，但是，会把:not里面的选择器当普通选择器计数。这句话有点不好理解，其实就是忽略掉:not，其他伪类(如:hover)参与CSS优先级的计算，但是「:not」不参与计算。

举个例子：

<!DOCTYPE html>

<html>

<style type="text/css">

div.outer p {

  color:red;

}

div:not(.outer) p {

  color: blue;

}

</style>

</head>

<body>

<div class="outer">

  <p>This is in the outer div.</p>

  <div class="inner">

    <p>This text is in the inner div.</p>

  </div>

</div>

</body>

</html>

该例子中，选择器div.outer p 和选择器div:not(.outer) p的优先级是相同的，:not被忽略掉了，:not(.outer)中的.outer正常计数。

如果调换位置，inner元素会变成红色

    div:not(.outer) p {

        color: blue;

    }

    div.outer p {

        color:red;

    }

5、优先级计算不升位

不要把权重简单的作为10进制数字比较其大小。

a=1的规则优先级将永远高于其他a=0的。

比如一个选择器的a>0，b=0即使另外一个选择器的a=0，b=12，c=12那么前者的权重依然更大！！

为证明我做了一个不现实的demo

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<style type="text/css">

#test{ /*a=1*/

    color: blue

}

div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest{ /*b=12*/

color:green;

}

</style>

</head>

<body>

<div  class="classtest">

<div class="classtest">

<div class="classtest">

<div class="classtest">

<div class="classtest">

<div class="classtest">

<div class="classtest">

<div class="classtest">

<div class="classtest">

<div class="classtest">

<div class="classtest">

<div id="test" class="classtest">

什么颜色文章

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

可见文本颜色还是蓝色！！

同样有一个带有10个id选择器的规则，优先级也不如内联样式。

总之优先级的计算不是基于十进制升位的，后面的数优先级再高也不能升到前一位。

6、其他

下面再给出一个经典的例子，自己计算一下就明白了。

Examples:

*               /* a=0 b=0 c=0 -> specificity =   0 */

LI              /* a=0 b=0 c=1 -> specificity =   1 */

UL LI           /* a=0 b=0 c=2 -> specificity =   2 */

UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */

H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */

UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */

LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */

#x34y           /* a=1 b=0 c=0 -> specificity = 100 */

#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

如果确实有棘手的情况，可以在Firebug中查看优先级。Firebug中按照优先级排序显示规则，将优先级更高的规则显示在最上面，并将被覆盖的规则用删除线划掉。

三、!import

为什么没有把!import放在优先级顺序中，因为官方认为!import和优先级没一点关系。

不建议使用!import

  • Never 绝不要在全站使用!import。
  • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用   !important
  • Never 永远不要在你的插件中使用 !important
  • Always 要优先考虑使用样式规则的优先级来解决问题而不是 !important

选择元素时尽量不要多选，不要放宽选择器的范围。因为范围越小，越具有针对性，优先级越高。

1、什么场合使用!import?

使用!import的场合也是有的，但是是在没有别的解决方案的时候。

比如需要覆盖内联样式，因为内联样式的优先级最高，只能用!import去覆盖内联样式。

还有一种情况

<style type="text/css">

#someElement p {

    color: blue;

}

p.awesome {

    color: red;

}

</style>

</head>

<body>

<div id="someElement">

<p class="awesome">some text</p>

</div>

</body>

在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用 !important ，第一条规则永远比第二条的优先级更高。这也是没有别的办法，如果用内联结果只会更糟糕。

2、怎样覆盖已有!import规则

a、再加一条!import的css语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、类或者ID选择器）。

几个更高优先级选择器的例子：

table td    {height: 50px !important;}

.myTable td {height: 50px !important;}

#myTable td {height: 50px !important;}

b、选择器一样，但添加的位置在原有声明后面。因为相同优先级，后边定义的声明覆盖前面的。

相同选择器的例子：

td {height: 30px !important;}

td {height: 50px !important;}

四、资源链接

http://www.w3.org/TR/selectors/#specificity
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

深入理解css优先级的更多相关文章

  1. CSS优先级的两种理解方式

    方式一:值相加 我们先去MDN看看官方的解释: 优先级是如何计算的? 优先级就是分配给指定的 CSS 声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定. 而当优先级与多个 CSS ...

  2. css 优先级

    css优先级的四大原则: 原则一: 继承不如指定 如果某样式是继承来的永远不如具体指定的优先级高.例子1:CODE:<style type="text/css"> &l ...

  3. css优先级汇总

    原文:css优先级汇总 我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴 ...

  4. CSS优先级的及其衡量标准CSS权重

    一.背景 CSS有三大特性:层叠性.继承性.优先级. 而我们在给CSS定义样式的时候,经常出现两个及以上的规则应用在同一元素上,单该元素最终在浏览器呈现的效果是应用的哪个规则呢?这就要考虑优先级的问题 ...

  5. CSS优先级的详细解说

    一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 二.CSS优先级规则 既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重 ...

  6. 深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）

    标题中的 Cascading 亦可以理解为级联. 进入正文,这是一个很有意思的现象.可以直接跳到 总结一下 部分,看完再回过头来阅读本文. 引子 假设我们有如下结构: <p class=&quo ...

  7. css优先级和权重

    1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下, ...

  8. 理解CSS

    写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...

  9. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

随机推荐

  1. 仿照selalchemy实现简单的mongo查询

    首先这是一个很奇葩的需求,时间紧迫顺手胡写了一个,以后看看有没有好的思路 def and_(item_list): return "%s:[%s]" % ("$and&q ...

  2. 论decltype和auto的区别

    论decltype和auto的区别   decltype和auto的区别 ①对引用变量的不同之处:auto将引用变量赋给变量后,变量的类型为引用变量所对应的变量的类型.而decltype则是为引用类型 ...

  3. seq2seq

    seq2seq: seq2seq就是将输入序列经过encoder-decoder变成目标序列. 如图所示,输入序列是 [A, B, C, <EOS>],输出序列是  [W, X, Y, Z ...

  4. 001 UI介绍

    UI全称:User Interface,即用户界面 UI的职责:负责人机之间的交互,它需要将关键信息,操作逻辑等展示给用户 UI在游戏中承担的职责: 1.游戏美术风格的重要组成部分 2.承担着重要的美 ...

  5. 001 Lua相关链接

    Lua官网:http://www.lua.org/ Lua for windows地址:http://www.lua.org/download.html Lua教程:http://www.runoob ...

  6. HIS（LIS、PACS、RIS、EMR）系统简介

    HIS(LIS.PACS.RIS.EMR)系统简介 HIS:医院信息系统(Hospital Information System, HIS),利用电子计算机和通讯设备,为医院所属各部 门提供病人诊疗信 ...

  7. CSS3 Background-origin

    Background-origin是CSS3为Background扩展的第三个属性,从Background-origin字面上不难发现是指背景图片的原点,其实background-origin主要就是 ...

  8. jquery实现点击页面空白处，弹框消失

    要求:点击1,弹框2显示,点击空白处,弹框2消失 $("#AddDevices"):按钮1 $(".addDeviceBox")弹框2 //点击添加设备弹框 $ ...

  9. python复习1

    比如常用的数学常数π就是一个常量.在Python中,通常用全部大写的变量名表示常量: Python支持多种数据类型,在计算机内部,可以把任何数据都看成一个“对象”,而变量就是在程序中用来指向这些数据对 ...

  10. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165237

    2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 20165237 安装虚拟机 首先创建虚拟机 创建好虚拟机后,打开虚拟机进行安装.第一步选择Graphcal i ...