css中的层叠性及权重的比较

本文转载于:猿2048网站➫css中的层叠性及权重的比较

假如同一个标签被多个选择器选中，每一个选择器都设置了相同的样式，浏览器中加载时这个样式听谁的？

不一样选择器设置的同一个样式，只会选择一个进行加载，不会叠加。

为了解决听谁的问题，引入层叠性的概念。

层叠性：多个选择器选中同一个标签，设置同一个样式，浏览器中加载时，不会加载全部的属性值，挑选其中一个加载，其中一个值层叠/覆盖掉其余的值。

 

要实现层叠或覆盖就涉及到比较，下面就是比较选择器之间的权重的比较，权重的比较一共有两种状况：一、选择器选中了标签；二、选择器没有选中标签

首先说一下选择器的权重：id>class>标签>*(通配符)；

①选择器选中了标签：

首先：若是都选中了标签，比较选择器权重。

选择器有权重，权重大的会层叠权重小的。

计算权重：选择器选择的范围越大，权重反而越小。id>class>标签>*

方法：数选择器的数量，先比较id个数→再比较class个数→最后比较标签个数。

图片中的标注顺序（id个数，class个数，标签个数） 页面上显示的样式：

控制台显示：

 

其次：若是选择器权重相同，比较css中代码的书写顺序。

css代码有加载顺序，从上往下加载，后面加载的会覆盖前面加载。

 

 #box1 .box2 .box3 p{      (1,2,1) 　　color: red; } .box1 #box2 .box3 p{ (1,2,1) 　　 color: green; } .box1 .box2 #box3 p{ (1,2,1) 书写顺序最后，层叠前面的样式  　　color: blue; }

 

 

②选择器都没有选中标签：一部分样式是能够继承的。继承谁的？

首先：比较每一个选择器选中的元素，距离目标元素p的在HTML中的距离，距离近的层叠距离远的。简称就近原则。

 

 #box1{    

　　 color: red;

 }

  .box1 .box2{

  　　color: green;

  } 

  .box3{           选中的标签距离p最近，继承他的

  　　color: blue;

  }

 

 

其次：若是距离同样近，比较权重，权重大的层叠权重小的。

 

 #box1 .box2 #box3{               (2,1,0) 　　 color: red; } .box1 #box2.box2 #box3{ (2,2,0)  　　color: green; } .box1 .box2 #box3.box3{ (1,3,0) 　　color: blue; }

 

 

再次：若是距离同样近，选择器权重同样，看书写顺序。

 

 #box1 .box2 #box3.box3{

 　　 color: red;

  }

  .box1 #box2.box2 #box3{

 　　 color: green;

  }

  #box1.box1 #box2 .box3{

 　　 color: blue;

  }

 

 

特殊的，在比较权重的过程当中，有一个单词important能够提高某一个样式属性的权重到最大。

比较就近原则，important对继承性没影响。

 

 #box1 .box2 #box3.box3{ 　　color: red; } #box3{ 　　color: green !important; 将这条属性的权重提高的最大，与选择器权重无关 } #box1.box1 #box2 .box3{ 　　color: blue; }

 

 综上所述：

 

最后：

以上比较都是以css内嵌式为例，在css的行内式、内嵌式和外链式中，权重：行内>内嵌=外链，顾名思义不管内嵌式或者外链式的权重多大都抵不过一句行内式！

可是加了important以后，权重就会高于行内式。若是该属性是继承而来的，加了important无效，以行内为准！