当我们写页面的时候, 不知道你会不会产生这样的问题, 为什么我给他添加的这条样式分明已经选择到我要给的元素了, 但是他的样式并没有生效, 那是为什么呢? 定义的属性有冲突, 浏览器会选择用那一套样式呢, 下面来介绍一下选择器的优先级和权重.
优先级是什么?
直接复制了 MDN 对优先级的定义 上的解释:
浏览器通过优先级来判断哪一些属性值与一个元素最为相关, 从而在该元素上应用这些属性值. 优先级是基于不同种类选择器组成的匹配规则.[相关教程推荐: CSS 视频教程 https://www.html.cn/css/video/ ]
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的. 优先级仅由选择器组成的匹配规则决定的. 优先级就是分配给指定的 CSS 声明的一个权重, 它由匹配的选择器中的每一种选择器类型的数值决定.
简单来说: 所谓 CSS 优先级, 即是指 CSS 样式在浏览器中被解析的先后顺序.
优先级仅由选择器的匹配规则来决定, 优先级顺序
下列是一份优先级逐级增加的选择器列表:
通用选择器(*)
元素 (类型) 选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
权重是什么?
权重, 是一个相对的概念, 是针对某一指标而言. 某一指标的权重是指该指标在整体评价中的相对重要程度.
权重系数, 是表示某一指标项在指标项系统中的重要程度, 它表示在其它指标项不变的情况下, 这一指标项的变化, 对结果的影响.
CSS 权重是什么?
CSS 权重决定了你 CSS 规则怎样被浏览器解析直到生效."css 权重关系到你的 css 规则是怎样显示的".
当很多的规则被应用到某一个元素上时, 权重是一个决定哪种规则生效, 或者是优先级的过程.
每个选择器都有自己的权重. 你的每条 CSS 规则, 都包含一个权重级别. 这个级别是由不同的选择器加权计算的, 通过权重, 不同的样式最终会作用到你的网页中 .
CSS 通过 CSS 选择器的权重占比, 来计算 CSS 选择规则的总权值, 从而确定 定义样式规则的 优先级次序;
从 "css 权重的理解" 中得知, 原来所谓为的 CSS 选择规则的优先级 是按照 CSS 选择器的权值的比较 来确定的(可能光看这句还是一头雾水的, 不急, 看完我接下来介绍 估计你马上会有豁然开朗的感觉, 但, 请先记住这句话);
CSS 优先级规则:
CSS 选择规则的权值不同时, 权值高的优先;
CSS 选择规则的权值相同时, 后定义的规则优先;
CSS 属性后面加 !important 时, 无条件绝对优先;
权值的计算:
每一个 CSS 的选择器都有一个相对的重要程度值, 也就是权重的值, 简称 "权值";
网上很容易找到这张图, 他描述了 CSS 选择器的权值等级划分:
权值等级划分, 一般来说是划分 4 个等级:
第一等: 代表 内联样式, 如: style="", 权值为: 1000.
第二等: 代表 ID 选择器, 如:#content, 权值为: 0100.
第三等: 代表 类, 伪类和属性选择器, 如: .content , :hover , [type="text"] 权值为: 0010.
第四等: 代表 标签选择器和伪元素选择器, 如: p ,::first-line 权值为: 0001.
通配符, 子选择器, 相邻选择器等的. 如: *,>,+, 权值为: 0000.
继承的样式没有权值, 通配选择器定义的规则优先级高于元素继承过来的规则的优先级.
最后比较特殊的一个标志! important(权重), 它没有特殊性值, 但它的优先级是最高的, 为了方便记忆, 可以认为它的特殊性值为 1,0,0,0,0.
权值计算 公式:
权值 = 第一等级选择器 * 个数, 第二等级选择器 * 个数, 第三等级选择器 * 个数, 第四等级选择器 * 个数;
权值比较 规则:
当两个权值进行比较的时候, 是从高到低逐级将等级位上的权重值 (如 权值 1,0,0,0 对应 --> 第一等级权重值, 第二等级权重值, 第三等级权重值, 第四等级权重值) 来进行比较的, 而不是简单的 1000 * 个数 + 100 * 个数 + 10 * 个数 + 1 * 个数 的总和来进行比较的, 换句话说, 低等级的选择器, 个数再多也不会越等级超过高等级的选择器的优先级的;[为什么这么特别强调呢, 因为为在网上查资料的时候, 看到好多博客是把这个权重值理解成了所有等级的数字之和了] , 说到这里 再 配合下图 大家应该就差不多理解了,
总结, 这个比较规则就是三点
先从高等级进行比较, 高等级相同时, 再比较低等级的, 以此类推;
完全相同的话, 就采用 后者优先原则(也就是样式覆盖);
CSS 属性后面加 !important 时, 无条件绝对优先(比内联样式还要优先);
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/15979.html