重拾css(7)——选择器的优先级

上一节我们知道，选择器种类较多，同一个元素，可以采用不同的选择器方式选中，此时哪个选择器的样式会被最终显示呢？

特指度

特指度表示一个css选择器表达式的重要程度，每个选择器表达式都可以通过一个公式计算出一个数值，数越大，越重要。
这个公式叫“I - C - E”计算公式：

• I —— Id; 100

• C —— Class; 10

• E —— Element; 1

即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。
例如：

注意：!important优先级最高，高于上面一切。* 选择器最低，低于一切。

此公式也可由三条规则来简单计算：

• 规则一，包含ID的选择器胜过包含Class的选择器，包含Class的选择器胜过包含元素的选择器

• 规则二，不同选择器的特指度比较时，不区分加载的顺序（相同选择器在层叠时，后加载的覆盖前加载的），例如：

  <div id="div1" class="div1">Jerry</div>

  #div1 {color:red;}

  .div1 {color:blue;} //虽然.div1后加载，但是特指度低，所以最终还是显示红色

• 规则三，设置的样式高于继承的样式，不用考虑特指度，例如下图显示颜色为红色