选择器的优先级

在我们进行布局的过程中，选择器的层级越来越多，经常会导致我们写的样式，不生效。就是在f12工具里选中后，样式有，但是被划了横线。

1. 基础选择器的优先级

标签选择器、类选择器、id选择器

当选择器相同时，处于样式的下面的样式优先级更高。

div {
  color: red;
}

/* 下面优先级更高 */
div {
  color: blue;
}

如果选择器不同，选择器之间有优先级的概念。

标签选择器 < 类选择器 < id选择器

着重度

我们可以用着重度来表示选择器的优先级

选择器	着重度
标签选择器	1	着重都只是一个自己定义的值，这个值并非是 11 个标签选择器就比一个类选择器优先级高
类选择器	10
id选择器	100

基于复杂选择器时，我们着重度的计算就需要通过值进行相加得到新的着重度，值越大优先级越高。

<div class="box">
  <div class="item">
    <span class="text"> 文字</span>
  </div>
</div>

/* 10 + 10 + 10 = 30 */
.box .item .text {}

/* 10 + 10 + 1 = 21 */
.box .item span {}

/* 10 + 1 + 10 = 21 */
.box div .text {}

让大家了解优先级概念，就是为了告诉大家，如果遇到

这种情况，我们要考虑我们的选择器优先级是不是太低了。

行内样式

我们平时不会写的样式，是给js使用的，行内样式

<div style="color: red;"></div>

行内样式优先级要比id还要高。可以理解行内样式的着重度是1000

!important

如果我们写的样式想要在任何时候都不被覆盖，可以给属性后添加!important。这个东西可以无视选择器优先级，直接把对应属性优先级提高到最大，可以理解为着重度为10000

选择器 {
  color: red !important;
  font-size: 12px !important;
}

注意！！！！！！慎用!important 因为优先级太高。

优先级大小

标签选择器 < 类选择器 < id选择器 < 行内样式 < !important