在后面，咱们学习了样式表引入的优先级判断。如果多个选择器都来润饰同一个元素，优先级又该如何判断呢？

咱们来看一个例子。

<!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...