css优先级与权值

最新推荐文章于 2022-05-31 16:14:13 发布

猿音

最新推荐文章于 2022-05-31 16:14:13 发布

阅读量190

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_43348064/article/details/116104053

版权

笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

最近在做门户的项目遇到了一些关于css的优先级问题，写一个篇文章来总结一下自己的收获，
由于门户类的需要在后台发表一些文章，有些文章是有自带样式的，有些不带样式但是需要默认样式，这时候就需要用到css的优先级处理

css的就近原则

先说一下css的优先级吧！在css中有内嵌式，内联式，还有外联式。有人说在权值相同的情况下内嵌式>内联式>外联式，通过现象看本质看看是不是这样
在这里插入图片描述

很显然是内嵌式>内联式>外联式，但是如果将外联样式放在内联式的下面呢？还是上面的例子，调换一下位置

显然不符合之前说的内嵌式>内联式>外联式，在权值相同的情况下css的优先级是就近原则，因为html被浏览器加载时是从上往下加载的，之前的加载权值相同的样式会被后加载的样式所覆盖
在这里插入图片描述

css的权值

上面说是在权值相同的情况下css的优先级是就近原则，还是上面的例子
在这里插入图片描述

接下来看看权值的比较：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器，

属性后插有 !important 的属性拥有最高优先级

在这里插入图片描述

通过网上教程可以知道

选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100，你可以理解为 99.99，所以最终应用后者样式。(来自菜鸟教程)