12.CSS优先级

2021-04-13

一道题目

<style>
  .classA {
    color: blue;
  }
  .classB {
    color: red;
  }
  p {
    color: black;
  }
</style>
<p class="classB classA">hello</p>
<!-- 元素p内的文字最终什么颜色：red -->

解释：“类选择器” 的优先级要高于 “类型选择器”；后面声明的类选择器 > 先声明的类选择器，所以颜色为red（css）。

更多实例

1、

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .div1 {
    background-color: green;
  }
</style>
<div class="div1" id="div1"></div>
<!-- div最终什么颜色：green -->

解释：类选择器 > 类型选择器；

2、

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .div1 {
    background-color: green;
  }
  #div1 {
    background-color: red;
  }
</style>
<div class="div1" id="div1"></div>
<!-- div最终什么颜色：red -->

解释：ID选择器 > 类选择器 > 类型选择器；

3、

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .div1 {
    background-color: green;
  }
  #div1 {
    background-color: red;
  }
  #div1 {
    background-color: orange;
  }
</style>
<div class="div1" id="div1"></div>
<!-- div最终什么颜色：orange -->

解释：后面声明的ID选择器 > ID选择器 > 类选择器 > 类型选择器；

4、

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .div1 {
    background-color: green;
  }
  #div1 {
    background-color: red;
  }
  #div1 {
    background-color: orange;
  }
</style>
<div class="div1" id="div1" style="background-color: pink;"></div>
<!-- div最终什么颜色：pink -->

解释：行内样式 > 后面声明的ID选择器 > ID选择器 > 类选择器 > 类型选择器；

5、

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: blue !important;
  }
  .div1 {
    background-color: green;
  }
  #div1{
    background-color: red;
  }
  #div1{
    background-color: orange;
  }
</style>
<div class="div1" id="div1" style="background-color: pink;"></div>
<!-- div最终什么颜色：blue -->

解释：!important > 后面声明的ID选择器 > ID选择器 > 类选择器 > 类型选择器；

6、字号

<style>
  .div1 {
    font-size: 20px;
    width: 100px;
    height: 100px;
    background-color: green;
  }
  #div1 {
    background-color: red;
  }
  #div1 {
    background-color: orange;
  }
  .div2 {
    width: 80px;
    height: 80px;
    font-size: 10px;
  }
</style>
<div class="div1" id="div1">
  div1
  <div class="div2">div2</div>
</div>

给 div1 设置了 font-size，那么 div2 也会继承到相应的属性，但是，它的优先级比标签还要低，自然也小于类选择器和 id 选择器。

结果：div1的字号是20px，div2的字号是10px；

7、

<style>
  * {
    font-size: 30px;
  }
  .div1 {
    font-size: 20px;
    width: 100px;
    height: 100px;
    background-color: green;
  }
  #div1 {
    background-color: red;
  }
  #div1 {
    background-color: orange;
  }
  .div2 {
    width: 80px;
    height: 80px;
  }
</style>
<div class="div1" id="div1">
  div1
  <div class="div2">div2</div>
</div>

结果：div1的字号是20px，div2的字号是30px； 结论：div2 的字体大小是 30px，因此可以判断，通配符优先级大于继承。

优先级的计算

!important > 内联 > id > class > 标签 > 通配符 > 继承

对于多个选择器组合，我们要根据以下的优先级算法：

四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。

优先级的算法：

  • 每个规则对应一个初始"四位数"：0、0、0、0
  • 若是 行内选择符，则加1、0、0、0
  • 若是 ID选择符，则加0、1、0、0
  • 若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
  • 若是 元素选择符/伪元素选择符，则分别加0、0、0、1

算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。注意，同一级别无论累加多少都不会进位。

<style>
  div.div1 {
    font-size: 20px;
    width: 100px;
    height: 100px;
    background-color: green;
  }
  .div1.div0 {
    background-color: red;
  }
</style>
<div class="div1 div0" id="div1">
  div1
  <div class="div2">div2</div>
</div>
<!-- div1最终什么颜色：red -->

解释：div.div1 的优先级序列为 0，0，1，1， 而 div1.div0 的优先级序列为 0，0，2，0 因此，后者更加优先，故显示红色。

More

优先级
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

Cascade and inheritance
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

css 选择器优先级问题
https://zhuanlan.zhihu.com/p/299195035