在写CSS的时候我们经常会遇到选择器优先级的问题,比如说同一个元素的不同选择器可能会让元素呈现不同的效果,并且相同选择器的样式顺序也会影响效果.为了搞清楚选择器优先级的问题,我们不妨动手来联系一下,加深印象.

Round 1

首先准备好我们的html

  <div class="d1" id="d1">
  </div>

这是它的样式

<style>
  div {
    width: 50px;
    height: 50px;
    background-color: blue;
  }

  .d1 {
    background-color: red;
  }


</style>

结果图:

可以看到 ---> 类选择器的优先级是高于标签的优先级的

Round 2

接下来改动下样式,给id选择器添加样式 
<style>
   div {
    width: 50px;
    height: 50px;
    background-color: blue;
  }

  .d1 {
    background-color: red;
  }

  #d1 {
    background-color: yellow;
  }
</style>

结果图:

可以看到 ---> id选择器的优先级是高于标签和class选择器的优先级的

Round 3

在加入一个id选择器,看看会有什么不同

<style>

  .d1 {
    background-color: red;
  }

  #d1 {
    background-color: yellow;
  }

  #d1 {
    background-color: green;
  }

</style>

结果图:

可以看到 ---> 相同选择器的样式和他的顺序有关,一般呈现最后一个选择器里的样式

Round 4

在HTML里写了内联样式后

<div class="d1" id="d1" style="background-color: hotpink;">
  </div>

效果如下:

因此,内联样式的优先级比id更高

Round 5

假如我们在div标签的css里加 !important 呢? 
<style>
  div {
    width: 50px;
    height: 50px;
    background-color: blue !important;
  }

  .d1 {
    background-color: red;
  }

  #d1 {
    background-color: yellow;
  }

  #d1 {
    background-color: green;
  }
</style>

结果是这样子的:

你看,由于这个!important的顶级优先级,方块变成了蓝色

Round 6

再来一个情况,比如说有这样的html 
<div class="d1" id="d1">
  div1
  <div class="d2">
    div2
  </div>
</div>

样式如下

<style>
  /* div {
    width: 50px;
    height: 50px;
    background-color: blue !important;
  } */

  .d1 {
    font-size: 20px;
    width: 150px;
    height: 150px;
    color: red;
  }

  #d1 {
    background-color: yellow;
  }

  #d1 {
    /* background-color: green; */
  }

  .d2 {
    font-size: 10px;
    width: 50px;
    height: 50px;
  }ground-color: red;
  }

  #d1 {
    background-color: yellow;
  }

  #d1 {
    background-color: green;
  }
</style>

结果是这样子的:

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

Round 7

用通配符的优先级情况呢? 样式如下 
<style>
 * {
        font-size: 30px;
    }
    div {
        /* background-color: blue !important; */
    }
    .d1{
        font-size: 20px;
        width: 100px;
        height: 100px;
        background-color: green;
    }
    #d1{
        background-color: red;
    }
    #d1{
        background-color: orange;
    }
    .d2{
        /* background-color: aqua; */
        width: 80px;
        height: 80px;
        /* font-size: 10px; */
    }
</style>

结果是这样子的:

可以看到, d2的字体大小是 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
　　算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。注意，同一级别无论累加多少都不会进位。

举个例子:
html

  <div class="div1 div0" id="div1">
        div1
        <div class = "div2">
            div2
        </div>
    </div>

css

div.div1{
        font-size: 20px;
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .div1.div0{
        background-color: red;
    }

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