在CSS世界的权力——权重
创始人
2024-05-16 08:07:08
0次

在CSS的世界中也存在着权力即CSS权重

1. 概念

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式 

2. 以前的BUG

在实际开发中，我们常常会遇到样式不生效的问题，百思不得其解，其实这就是CSS的权重在作祟， 下面举个栗子 

    
CSS的权重问题

段落为id选择器所赋的黑色如图：

 3. 权重计算

大家都了解二进制如何比较大小吧：0010>0001 。
其权重计算与其类似。

 4.权重的叠加

权重叠加计算的时候就是将叠加的权重都加起来，就像二进制加法一样，但是要记住权重可以发生叠加，但是不能发生进位可以出现 0 0 0 10   但是不能将后面的10进一位

div span {/* 0,0,0,2 */
}
p #span_one{/* 0,1,0,1 */
}
p{/* 0,0,0,1 */
}

浏览器会执行权重最大的样式，这就是选择器的权重
每个选择器都有自己的权重，组合选择器由相加计算得到
且选择器权重不会满十进一：0,1,0,0>0,0,28,0

    
CSS的权重问题
权重的计算
优先渲染权重最大的样式

 结果如图：

 4. 加载顺序

除了权重之外，CSS的渲染规则还有一种即根据css的引入顺序来加载。
同权重的选择器，顺序在后面的最后被加载会覆盖之前的样式

也就是我们平时所说的就近原则，选择靠近结构的那个选择器进行渲染

p{color:green;
}
link
link
p{color:green;
}

 我们这里改变了两者的顺序，那么我们将会看到顺序最后引入的样式，后面的样式覆盖前面的样式

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：JavaScript WeakMap

下一篇：智障税品牌种草收割流

相关内容

热门资讯

迷你退出安卓系统了吗,转型新篇... 最近有没有发现你的手机上那个可爱的迷你退出图标突然不见了？别急，让我来给你揭秘迷你退出安卓系统了吗的...
华为优先使用安卓系统,打造自主... 你知道吗？最近科技圈里有个大动作，那就是华为宣布优先使用安卓系统。这可不是一个简单的决定，它背后可是...
安卓系统隐藏了设置,隐藏设置功... 你知道吗？安卓系统这个大宝藏里，竟然隐藏着一些不为人知的设置！是不是听起来就有点小激动呢？别急，今天...
反渣恋爱系统安卓,收获真爱 你有没有听说过那个神奇的“反渣恋爱系统安卓”呢？最近，这款应用在网络上可是火得一塌糊涂，不少单身狗都...
安卓出厂系统能升级,探索无限可... 你知道吗？现在这个时代，手机更新换代的速度简直就像坐上了火箭！而说到手机，安卓系统可是占据了半壁江山...
老安卓刷机系统,从入门到精通 你有没有想过，你的老安卓手机其实还有大大的潜力呢？没错，就是那个陪伴你多年的老安卓，它可不是只能用来...
安卓粉ios系统app,兼容性... 你有没有发现，身边的朋友圈里，安卓粉和iOS系统粉总是争论不休？今天，咱们就来聊聊这个话题，看看安卓...
安卓系统语言下载,探索安卓系统... 你有没有想过，你的安卓手机是不是该换换口味了？没错，就是语言！想象如果你能轻松切换到自己喜欢的语言，...
安卓共有多少种系统,究竟有多少... 你有没有想过，安卓这个我们每天不离手的操作系统，竟然有那么多不同的版本呢？没错，安卓系统就像一个大家...
安卓系统怎么播放swf,And... 你有没有遇到过这种情况：手里拿着一部安卓手机，想看一个SWF格式的动画，结果发现怎么也打不开？别急，...
pos机安卓系统跟win系统,... 你有没有想过，那些在我们生活中默默无闻的POS机，竟然也有自己的操作系统呢？没错，就是安卓系统和Wi...
俄罗斯封禁安卓系统,本土化替代... 俄罗斯封禁安卓系统的背后：技术、经济与社会的影响在数字化浪潮席卷全球的今天，智能手机已成为我们生活中...
安卓系统总是弹出权限,安卓系统... 手机里的安卓系统是不是总爱和你玩捉迷藏？每次打开一个应用，它就跳出来问你要不要给它开权限，真是让人又...
安卓系统测血氧,便捷健康生活新... 你知道吗？现在科技的发展真是让人惊叹不已！手机，这个我们日常生活中不可或缺的小玩意儿，竟然也能变身成...
蓝光助手安卓系统的,深度解析与... 你有没有发现，现在手机屏幕越来越大，看视频、刷抖音，简直爽到飞起！但是，你知道吗？长时间盯着屏幕，尤...
安卓系统如何隐藏提示,Andr... 你是不是也和我一样，在使用安卓手机的时候，总是被那些弹出来的提示信息打扰到？别急，今天就来教你怎么巧...
安卓6.0系统如何分区,And... 你有没有想过，你的安卓手机里那些神秘的分区到底是怎么来的？别急，今天就来给你揭秘安卓6.0系统如何分...
安卓系统图片怎么涂鸦,指尖上的... 你有没有想过，在安卓系统的手机上，那些单调的图片也能变得生动有趣呢？没错，就是涂鸦！今天，就让我来带...
安卓系统40g,40GB存储空... 你有没有发现，最近你的安卓手机突然变得有点“胖”了呢？没错，就是那个传说中的40G！别急，别慌，今天...
安卓5.0系统怎么重置,轻松实... 手机用久了是不是感觉卡得要命？别急，今天就来教你怎么给安卓5.0系统来个彻底的重置，让它焕发新生！一...