CSS样式优先级——不止“就近原则”那么简单

CSS样式优先级

CSS是Cascading Style Sheets的全称，中文译为层叠样式表。关键字“层叠”体现在——页面中的元素往往是多个样式属性叠加在一起作用后的效果。
那么在众多样式中，如果对同一个样式属性重复设置不同的属性值，最终“脱颖而出”的会是哪一种属性值？

取决于以下三元素（按优先级由高到低排列）

Importance（重要性声明）
specificity（特性值）
Source order（代码顺序）

特性值越大，优先级越高，特性值相同时，位置越靠近元素的优先级越高，!important不计入特性值中，使用了该属性的样式优先级最高

1.Importance（重要性声明）

在css规则的值末尾添加“!important”能够保证该样式的优先级最高。但是一般并不建议该种写法，因为会破坏样式本身的优先级规则，不利于后期维护。

2.specificity（特性值）
根据所用选择器的特性值判定优先级，通过以下4个特性值来量化一个选择器：

style属性中（行内样式）:1000
id选择器:100
类选择器/属性选择器/伪类选择器:10
元素选择器/伪元素选择器：1

3.Source order（代码顺序）
由于页面是自上而下加载的顺序，所以后加载的样式就会把先加载的样式覆盖，简单可以理解为“就近原则”——样式离元素位置越近，越后被加载，优先级越高。这样也就不难理解为什么行内样式的优先级高于内联样式和外部引入。
“就近原则”的前提是特性值相等，如果特性值不等，特性值大的，优先级高，这时“就近原则”就不起作用
例如：
以下是html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 内联样式 --><style type="text/css">#one{/*特性值：100*/width: 200px;height: 200px;background-color: red;}</style><!-- 外部引入样式 --><link rel="stylesheet" href="style.css">
</head>
<body><div id="one"></div>
</body>
</html>

以下是style.css代码

div{/* 特性值：1*/background-color: blue;
}

例子中div元素的background-color样式被两次定义，由于内联样式使用的是id选择器，特性值为100，外部引入样式中使用的是标签选择器（元素选择器），特性值为1，特性值越大，优先级越高，这时，所谓的“就近原则”也就失效了，所以div元素的background最终呈现红色。
html文件在浏览器中的解析效果如下图所示：

如果修改内联样式中的选择器同样为div标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 内联样式 --><style type="text/css">div{/*特性值：1*/width: 200px;height: 200px;background-color: red;}</style><!-- 外部引入样式 --><link rel="stylesheet" href="style.css">
</head>
<body><div id="one"></div>
</body>
</html>

style.css文件不变，html文件将被浏览器解析为下图

特性值相同的前提下，采用“就近原则”，外部引入样式中的{background-color: blue;}样式属性值生效，并且内联样式中的{width: 200px;height: 200px}依然被采用，最终样式为{width: 200px;height: 200px;background-color: blue;}这也就是所谓的层叠样式表“叠加效果”——不同的样式属性组合作用在一起。

CSS样式优先级——不止“就近原则”那么简单相关推荐

CSS样式优先级及选择器
css样式优先级: 样式的结构顺序:外部样式>内部样式>行内样式样式的最终显示结果:以就近原则为准 css样式选择器: 1.标签选择器: 例:h/p/span/input/div/a{ ...
css样式优先级规则总结
CSS样式优先级规则共有4点 1)不同类型css选择器,优先级总是符合如下规则内联样式 > ID 选择器 >伪类 > 属性选择器 > 类选择器 >元素(类型)选择器 & ...
怎么排列html的顺序,css样式优先级及层叠的顺序排序探讨
一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用!important可 ...
CSS样式优先级顺序详解
CSS样式优先级详解这里有一篇对CSS样式的优先级顺序进行解释的,讲的挺详细的,写的不错.大家可以参考这一篇: https://juejin.im/post/5f0eae715188252e3c4d ...
css样式优先级问题
此片博客为参考博客,更多详情可看:https://www.cnblogs.com/ombre/p/7418667.html 官方表述的CSS样式优先级如下: 通用选择器(*)<元素(类型)选择器 ...
强制改变css样式优先级
1:!important作用是提高指定CSS样式规则的应用优先权.在CSS中,通过对某一样式声明! important ,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级,也就是相 ...
何为CSS 样式优先级
当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身.下面我们从这两方面去看看 CSS 样式的优先级. CSS 的继承性 CSS 的继承特性指 ...
CSS样式优先级与权重计算方式
CSS一共有四种样式控制方式:行内样式.内嵌样式.链接样式.导入样式(@import).选择器则有标签选择器,类名选择器,ID选择器,和伪标签选择器四种.那么它们的优先级与权重又是计算的呢? 首先上权 ...
css样式优先级机制
对css选择器不熟悉的建议先看看w3school 一.权值不同时样式类型权重值 style内联样式(标签内部) 1000 ID选择器 0100 类选择器,属性选择器,伪类 0010 元素选择器,伪 ...

CSS样式优先级——不止“就近原则”那么简单

CSS样式优先级

CSS样式优先级——不止“就近原则”那么简单相关推荐

最新文章

热门文章