零基础教你学前端——68-CSS选择器的权重

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

我们来看一个例子。

  
  
  
  
  


  

    学历和能力哪个更重要？
  

仔细观察一下，h1 元素同时存在内联样式和内部样式的修饰。内部样式的 ID 选择器、通用选择器、类选择器和元素选择器，也都指向了 h1 元素。

多个样式作用于同一个元素，是冲突的，到底哪个优先级更高呢？

现在，标题文本的颜色你一定知道，是紫色。因为内联样式优先级高于内部样式。

如果把内联样式删掉，标题的文本会是什么颜色呢？

我们看，是蓝色！说明这四个选择器，ID 选择器优先级最高。

去掉 ID 选择器，标题变成了绿色！说明这三个选择器，类选择器优先级最高。

再去掉类选择器，标题变成了红色！说明元素选择器优先级高于通用选择器。

最后去掉元素选择器，标题变成了橙色！说明这里通用选择优先级最低。

通过这个例子，我们可以总结一个规律：行内样式优先级大于ID选择器，大于类选择器，大于元素选择器，大于通用选择器。但是，光掌握这个规律还不够，遇到一些更复杂选择器，就比较难判断了。

我们再看一个案例。

  
  
  
  
  


  
我觉得能力更重要！
  

    
其实这无非是证明自己价值、或被别人认可的一种方式，从客观的角度来讲，当你大学刚毕业的时候，没有工作经验，那学历肯定是让别人认可你的第一方式。
  
  

    
但是如果你工作了三五年，还只能靠学历来证明自己的价值，那我觉得是很失败的。
  

在这个案例中，所有的选择都在针对 p 元素，设定它的文字颜色。很明显这些选择器，它们之间也是冲突的，这个时候浏览器会根据选择器的权重值来判断。

也就是说，当样式发生冲突时，谁的权重值高，谁就生效！那权重值该怎么计算呢？

这里，给你一个表，你只需要记住这 5 个东西，就一劳永逸了。

通用选择器，它的选择范围最大，权重值最小，只有 0。

元素选择器，权重值为 1。

类选择器，权重值是 10。

ID 选择器，权重值是 100。

行内样式，权重值最大，是 1000。

有了这 5 个选择器的权重值，就可以计算任何一个选择器的权重了，优先级也会一目了然。

比如，看这个选择器：井号box，下面的 p 元素，下面的点light。(#box p .light) 这个选择器的权重值有多大呢？

没错，只需要把这三个选择器的权重值相加就可以了。

再对比一下这个选择器（#box .light），很明显的看出来，上边这个选择器的优先级更高。

如果你刚开始接触CSS，计算权重值可能会有一些麻烦。

选择器选择的范围越小，越精确，优先级就越高！

你可以自己把这个秘籍，套用到刚才的两个选择器中验证一下。

再次回到这个例子。

我们可以把这些选择器的权重值都计算出来。

第一个段落，哪个选择器对应它呢？只有第一个匹配了，权重值为 1。此时也没有别的样式冲突。这个段落的文字颜色就是紫色了！

第二个段落，对应它的选择器有三个。这里可以明显的看到，哪一个权重值是最高的，那就是最后一个。所以，这个段落的颜色就是橙色。

第三个段落，对应它的选择器有四个。我们也可以很容易的从权重值中，看到那个选择器的优先级最高。所以，第三个段落的颜色是蓝色。

文章配套视频链接：https://www.bilibili.com/vide...