CSS基础：谈谈选择器的权重和优先级

╰半夏微凉° 2022-10-31 00:54 182阅读 0赞

# 你必须懂的css样式权重和优先级 #

问题：选择器的权重与优先级有什么关系？

## 一、什么是权重？ ##

先来看下面这样两段代码，大家分析`class="c"`的标签内文字的颜色是？

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70]

结果：是红色  
（假如我刚接触css，我会理解为，选择器越长，样式的优先级越高，所以上面的生效了）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70 1]

结果：是蓝色。  
（我推翻了第一个结论，我知道**id选择器**优先级更高）

看了这两个示例，我们意识到样式生效一定是有**优先级**的，并不全是由代码层面的先后顺序决定的。那么这种优先级又是谁来决定的呢？

**小结一下：**

*  浏览器通过`优先级`来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。
 *  优先级是由匹配的选择器中每一种`选择器类型`的 `数值` 决定的。
 *  `当同一个元素有多个声明的时候，优先级才会有意义`。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
 *  当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中**最后**的那个声明将会被应用到元素上。

## 二、常见选择器的权重 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70 2]

*  行内样式+1000
 *  d选择器+100
 *  属性选择器、class或者伪类+10
 *  元素选择器，或者伪元素+1
 *  通配符+0。

每一组选择器在判断优先级的时，是相加的关系，举例：

#id .class span{
    // 权重是 100+10+1 = 111
    }

这样再来回顾第一小节的例子，优先级一目了然，哪个样式会生效就清楚了。

**!important - 例外规则**

当在一个样式声明中使用一个 `!important` 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，`!important` 与`优先级`无关，但它与最终的结果直接相关。

上面的例子优先级没变，但结果被`important`影响了。

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。

再来看这样的例子：

当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

**小结一下：**

*  每一组选择器在判断优先级的时，是相加的关系
 *  一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
 *  只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
 *  永远不要在你的插件中使用 !important
 *  永远不要在全站范围的 CSS 代码中使用 !important

## 三、有关优先级有意思的细节 ##

#### 3.1 为目标元素直接添加样式，永远比继承样式的优先级高 ####

#parent { 
      color: green;
    }
    
    h1 { 
      color: purple;
    }

当它应用在下面的HTML时：

<html>
      <body id="parent">
        <h1>Here is a title!</h1>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70 3]

会显示紫色！

#### 3.2 外联样式和内联样式存在区别 ####

文章开始我们提过，样式生效不取决于代码层面的顺序，我们来看这样的例子

/* styles.css */
    #box{ 
    	background-color: yellow;
    }
    #div{ 
    	width: 500px;
    	height: 500px;
    	background-color: pink;
    }

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>先引入后内联</title>
    		<link rel='stylesheet' href='css/styles.css'>
    		<style> #div{ width: 200px; height: 200px; background-color: yellow; } </style>
    	</head>
    	<body>
    		
    		<div id='div'></div>
    	</body>
    </html>

结果是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70 4]

而将外链标签放在style之后，结果确实另外一个样子：

![在这里插入图片描述][20210221160813766.png]  
上面的例子足以说明内联样式的优先级并不一定比外联样式高，因为css样式是单线程，依次从上向下加载的，这也就证明了内联样式和外联样式的优先级和加载顺序有关。

## 写在最后 ##

这是《CSS基础系列》第一篇文章

如果对你有所帮助不妨给本项目的[github 点个 star][github _ star]，这是对我最大的鼓励！

**关于我**

*  花名：余光
 *  WX：j565017805
 *  沉迷 JS，水平有限，虚心学习中

**其他沉淀**

*  [Github: Js 版 LeetCode 题解][Github_ Js _ LeetCode]
 *  [前端进阶笔记][Link 1]
 *  [CSDN 博客汇总][CSDN]

![yuguang-csdn-bottom.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70]: /images/20221024/1cff97e6bb1a4507bbc19d553cde8da3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70 1]: /images/20221024/a830d231ce52446e948300dce07e2b95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70 2]: /images/20221024/ef548710031e4271aa538476a3552c29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70 3]: /images/20221024/debcc90f630c401e93a1a149fe4da69f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70 4]: /images/20221024/5cf08c8cae76448c8ade2a61bb9b2288.png
[20210221160813766.png]: /images/20221024/066d5405c2764808b754507803512296.png
[github _ star]: https://github.com/webbj97/summary
[Github_ Js _ LeetCode]: https://webbj97.github.io/leetCode-Js/
[Link 1]: https://webbj97.github.io/summary/
[CSDN]: https://yuguang.blog.csdn.net/
[yuguang-csdn-bottom.gif]: /images/20221024/9f2b2dc6c93949d385b52530cf941ecf.png