必须了解的css中的层叠性及权重的比较

2019-09-12 郑州网站建设  

层叠性:多个选择器选中同一个标签,设置同一个样式,浏览器中加载时,不会加载所有的属性值,挑选其中一个加载,其中一个值层叠/覆盖掉其他的值。

要实现层叠或覆盖就涉及到比较,下面就是比较选择器之间的权重的比较,权重的比较一共有两种情况:1、选择器选中了标签;2、选择器没有选中标签

首先说一下选择器的权重: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{

特殊的,在比较权重的过程中,有一个单词important可以提升某一个样式属性的权重到最大。

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

#box1 .box2 #box3.box3{

color: red;

}

#box3{

color: green !important; 将这条属性的权重提升的最大,与选择器权重无关

}

#box1.box1 #box2 .box3{


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2020.html转载请标明出处,谢谢合作!
标签:
  • css
  • 同一个
  • е
  • 多个
  • 选择
  • 选中