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

最新推荐文章于 2023-01-21 12:00:00 发布

Angelayueyue_

最新推荐文章于 2023-01-21 12:00:00 发布

阅读量1k

点赞数 1

分类专栏： CSS CSS选择器文章标签： css

本文链接：https://blog.csdn.net/weixin_44249574/article/details/107673321

版权

CSS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS选择器

2 篇文章 0 订阅

订阅专栏

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;}这也就是所谓的层叠样式表“叠加效果”——不同的样式属性组合作用在一起。