共计 2092 个字符，预计需要花费 6 分钟才能阅读完成。
在后面，咱们学习了样式表引入的优先级判断。如果多个选择器都来润饰同一个元素，优先级又该如何判断呢？
咱们来看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选择器权重——一个例子 </title>
<style>
#h-one {color: blue}
* {color: orange}
.header {color: green}
h1 {color: red}
</style>
</head>
<body>
<h1 class="header" id="h-one" style="color: purple">
学历和能力哪个更重要？</h1>
</body>
</html>仔细观察一下，h1 元素同时存在内联款式和外部款式的润饰。外部款式的 ID 选择器、通用选择器、类选择器和元素选择器，也都指向了 h1 元素。
多个款式作用于同一个元素，是抵触的，到底哪个优先级更高呢？
当初，题目文本的色彩你肯定晓得，是紫色。因为内联款式优先级高于外部款式。
如果把内联款式删掉，题目的文本会是什么色彩呢？
咱们看，是蓝色！阐明这四个选择器，ID 选择器优先级最高。
去掉 ID 选择器，题目变成了绿色！阐明这三个选择器，类选择器优先级最高。
再去掉类选择器，题目变成了红色！阐明元素选择器优先级高于通用选择器。
最初去掉元素选择器，题目变成了橙色！阐明这里通用抉择优先级最低。
通过这个例子，咱们能够总结一个法则：行内款式优先级大于 ID 选择器，大于类选择器，大于元素选择器，大于通用选择器。然而，光把握这个法则还不够，遇到一些更简单选择器，就比拟难判断了。
咱们再看一个案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选择器权重——第二个例子 </title>
<style>
p { /* 1 */
color: purple;
}
div p { /* 1 + 1 = 2 */
color: green;
}
.box p { /* 10 + 1 = 11 */
color: orange;
}
#box p { /* 100 + 1 = 101 */
color: red;
}
div#box p { /* 1 + 100 + 1 = 102 */
color: blue;
}
</style>
</head>
<body>
<p> 我感觉能力更重要！</p>
<div class="box">
<p> 其实这无非是证实本人价值、或被他人认可的一种形式，从主观的角度来讲，当你大学刚毕业的时候，没有工作教训，那学历必定是让他人认可你的第一形式。</p>
</div>
<div id="box">
<p> 然而如果你工作了三五年，还只能靠学历来证实本人的价值，那我感觉是很失败的。</p>
</div>
</body>
</html>在这个案例中，所有的抉择都在针对 p 元素，设定它的文字色彩。很显著这些选择器，它们之间也是抵触的，这个时候浏览器会依据选择器的权重值来判断。
也就是说，当款式发生冲突时，谁的权重值高，谁就失效！那权重值该怎么计算呢？
这里，给你一个表，你只须要记住这 5 个货色，就一劳永逸了。
通用选择器，它的抉择范畴最大，权重值最小，只有 0。
元素选择器，权重值为 1。
类选择器，权重值是 10。
ID 选择器，权重值是 100。
行内款式，权重值最大，是 1000。
有了这 5 个选择器的权重值，就能够计算任何一个选择器的权重了，优先级也会高深莫测。
比方，看这个选择器：井号 box，上面的 p 元素，上面的点 light。(#box p .light) 这个选择器的权重值有多大呢？
没错，只须要把这三个选择器的权重值相加就能够了。
再比照一下这个选择器（#box .light），很显著的看进去，上边这个选择器的优先级更高。
如果你刚开始接触 CSS，计算权重值可能会有一些麻烦。
选择器抉择的范畴越小，越准确，优先级就越高！
你能够本人把这个秘籍，套用到方才的两个选择器中验证一下。
再次回到这个例子。
咱们能够把这些选择器的权重值都计算出来。
第一个段落，哪个选择器对应它呢？只有第一个匹配了，权重值为 1。此时也没有别的款式抵触。这个段落的文字色彩就是紫色了！
第二个段落，对应它的选择器有三个。这里能够显著的看到，哪一个权重值是最高的，那就是最初一个。所以，这个段落的色彩就是橙色。
第三个段落，对应它的选择器有四个。咱们也能够很容易的从权重值中，看到那个选择器的优先级最高。所以，第三个段落的色彩是蓝色。
文章配套视频链接：https://www.bilibili.com/vide…
