CSS层叠机制

wenzi 发布于2019-08-29 15:38 / 617人阅读

摘要：在层叠中每个样式规则都有一个权重值，当其中几条规则同时生效时，权重最大的规则优先。一般权重值跟对象，是否有特异度和位置先后有关。

css中为什么要有层叠机制

因为在css中可能会有多个样式同时影响同一个元素的某个属性，层叠机制可以解决作者（写代码的人），用户（浏览页面的人）和用户代理（一般指浏览器）的样式冲突。

在层叠中每个样式规则都有一个权重值，当其中几条规则同时生效时，权重最大的规则优先。一般来说作者指定的样式权重值高于用户样式权重值，用户样式权重高于客户端（用户代理）权重值。一般权重值跟对象，是否有！important,特异度和位置先后有关。在层叠顺序中，以下权重值从小到大

（1）用户代理样式

（2）用户一般样式

（3）作者一般样式

（4）作者重要样式（！important）

（5）用户重要样式（！important）

（6）如果是两个样式来自相同的代码，如都来自作者（代码），并且它们的样式声明同样重要，则根据特异度来计算，特异度高的会覆盖特异度低的

（7）如果特异度也相同，则越往后的样式优先级越高

为什么用户设置的重要样式比作者重要样式优先级高，这样做的原因是为了方便用户实现一些特殊的要求，例如页面字体大小的调整等。

选择器特异度的计算

（1）如果一个声明出现在元素的style属性中，则将a计为1；

（2）b等于选择器中所有ID选择器加起来的数量和

（3）c等于选择器中所有class选择器和属性选择器，以及伪类选择器加起来的数量和

（4）d等于选择器中所有标签选择器和伪元素选择器加起来的数量和

a-b-c-d即是选择器的特异度，比较顺序从a先比起，谁先大则优先级就越高。

注意：

继承的优先级最低，没有特异度

结合符（如+，>）及通用选择符（*）特异度为0

.box{} /*特异度=0，0，1，0*/
.box div{} /*特异度=0，0，1，1*/
#nav li{} /*特异度=0，1，0，1*/
p:first-line{} /*特异度=0，0，0，2*/
style="" /*特异度=1，0，0，0*/

专线服务 idc机房托管 html按钮层叠 html层叠顺序 html 层叠悬浮 html外部层叠样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113446.html

理解层叠样式表中的层叠机制，精准掌握元素样式

摘要：问题在写时，有时候会遇到浏览器中显示的样式和自己的预期不符合的情况，这是因为没有理解的层叠机制。清楚地理解了他这三大法宝，我们就能精准的预测出每个元素在浏览器中的样式了。问题：在写CSS时，有时候会遇到浏览器中显示的样式和自己的预期不符合的情况，这是因为没有理解CSS的层叠机制。例如文档中有一个p元素,用内联样式为他设置了颜色： 2016年10月20日在CSS中又用不同的方式给...

0x584a 2019-08-29 11:27 评论0 收藏0
CSS层叠机制

摘要：在层叠中每个样式规则都有一个权重值，当其中几条规则同时生效时，权重最大的规则优先。一般权重值跟对象，是否有特异度和位置先后有关。 css中为什么要有层叠机制因为在css中可能会有多个样式同时影响同一个元素的某个属性，层叠机制可以解决作者（写代码的人），用户（浏览页面的人）和用户代理（一般指浏览器）的样式冲突。在层叠中每个样式规则都有一个权重值，当其中几条规则同时生效时，权重最大的规...

justjavac 2019-08-26 12:00 评论0 收藏0
CSS学习笔记(四) CSS优先级

摘要：为了解决冲突，确定哪条规则胜出并最终被应用，提供了三种机制继承层叠和特指。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。层叠规则四顺序决定权重。规则三设定的样式胜过继承的样式，此时不用考虑特指度即显式设定优先。为了解决冲突，确定哪条规则胜出并最终被应用，CSS提供了三种机制：继承、层叠和特指。 1.继承 CSS 中的祖先元素会向后代传递一样东西：CSS属性...

高胜山 2019-08-28 18:01 评论0 收藏0
CSS规则的继承与层叠

摘要：我们知道字体属性在任意时刻都只能应用一种设定那此时该应用哪种字体呢为解决类似的冲突确定哪条规则胜出并最终被应用提供了三种机制继承层叠和特指。层叠规则层叠规则一找到应用给每个元素和属性的所有声明。层叠规则五设定的永远大于继承的。在一个较大的样式表中,可能会有很多条规则都选择同一个元素的同一个属性。比如,一个带有类属性的段落,可能会被一条以标签名作选择符的规则选中并指定一种字体,而另...

snowell 2019-08-28 18:06 评论0 收藏0
重拾css(4)——样式来源与层叠规则

摘要：摘自设计指南样式来源上文中提到，之所以有层叠的概念，是因为有多个样式来源。优先级相同条件下例如都来自引用样式，覆盖的默认规则是后者覆盖前者，但是有一个特殊情况，其实优先级最高。这一节就开始实践上一节的思路！ 1.层叠的概念简言之，层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。举一个简单的例子： showImg(https://segmentfault.com/img/b...

gityuan 2019-08-29 12:45 评论0 收藏0