【云+社区年度征文】CSS选择器优先级

CSS选择器优先级这个问题，相信有点经验前端都会认为非常简单，但是我们今天还是来总结一下吧。

样式表优先级

相信大家应该很少直接在html页面写样式吧，一般都是用link标签导入css样式表。

样式表有两个来源：1.浏览器默认样式 2.用户自定义样式

大家应该知道，不同浏览器都会给一些html常用标签添加一些默认的样式，这就是浏览器默认样式表，这也是我们写兼容样式的来源。

用户自定义样式表就是我们用link标签引入的css样式表，为了保持不同浏览器下样式相同，所以我们的自定义样式表一般都会覆盖浏览器的默认样式。市面上也出现了统一的浏览器样式的css库：reset.css和normalize.css。

所以我们可以得知：用户样式表的优先级大于浏览器默认样式表

行内样式

什么是行内样式？

行内样式就是在html元素使用style属性写样式，这就称为行内样式，比如：

<li><a href="/" class="featured" style="background-color: orange;">声明</a></li>

我们看到a标签就使用了行内样式。

想要覆盖行内样式必须给样式加上！important关键词才可以。

li>a{background-color:bule !important}

只有important关键字的样式声明才能覆盖行内样式，但是如果行内样式也加上了important关键字，那么这个样式的优先级将是最高，无法在覆盖,比如：

<li><a href="/" class="featured" style="background-color: orange !important;">声明</a></li>

选择器

我们大家都知道，选择器分三类，即ID，class，标签这三种选择器，优先级也是ID>class>标签。

准确的选择器优先级规则

1.首先比较ID选择器，ID选择器多的样式胜出，比如：

#main #content{color:font-size:14px}/*胜出*/
#content{color:font-size:16px}

2.ID数量一致，则比较class的数量，class数量多的样式胜出，比如：

  #content .text {font-size:14px}
  #content .text .span{font-size:16px}/*胜出*/

3.ID和class都一致，则比较标签的数量

  #content .text div{font-size:14px}
  #content .text div span{font-size:16px}/*胜出*/

选择器优先级标记

我们一般会用三个数字的数值形式来进行优先级标记，每个数字用逗号隔开。

比如：1,2,3这个数值则表示选择器是由：1个ID，2个class，3个标签组成，第一位表示ID，第二位表示class，第三位表示标签。

例子：

  #content .text div{font-size:14px}/*优先级标记：1,1,1*/
  #content .text div span{font-size:16px}/*优先级标记：1,1,2*/

大家自然也可以想到，把三个数字看着一个整数，数值越大，优先级也就越高

源码顺序

如果在样式表和选择器优先级都是平级的情况下，那么就将会通过源码顺序来判定，源码出现的较晚的样式将会覆盖掉前面的样式。

我们大家在写媒体查询的时候自然都会将覆盖样式写在普通样式下面，而不是上面，这样才能覆盖。

   div a{
     font-size: 16px;
   }
   @media screen and (max-width: 768px){
     div a{
       font-size: 12px;
     }
   }

如果你将媒体查询的样式放在普通样式上方，那么即使将屏幕宽度缩小到768px这不会覆盖普通样式，因为这两个样式是平级，优先级是通过源码顺序来决定。