一、CSS选择器的执行顺序
今天刷黄玄大神的微博看到一个题目，觉得很有意思，仅作记录用。
How well do you know CSS.jpg
经过我的实验，的确两个都是显示蓝色。
理由：CSS最终显示的效果是根据CSS文件定义的顺序来决定，而不是使用的顺序。
二、权重计算
CSS的选择器有很多种，而最终某个样式的值只能取其中一个，所以必然存在优先级和覆盖。
权重，简单地说就是为了便于我们计算优先级，给每种选择器赋予的一个值，权重值可以叠加计算，值越大优先级越高。
1、元素选择器和伪元素（权重值为1）
div{
color:red;
}
div::after{
color:red;
}
2、类选择器、属性选择器和伪类（权重值为10）
.box{
color:red;
}
a[href^="#"]{
color:red;
}
.box:hover{
cursor:pointer;
}
3、ID选择器（权重值为100）
#box{
color:red;
}
4、内联样式（权重值为1000）
<div style="width:300px;height:400px;"></div>
5、!important
!important权重值最高，由于它会破坏样式表中的级联规则，增加调试的难度，所以在平时开发中应尽量避免使用。
注 <a>标签的四个伪类（:link、:hover 、:active、:visited）的优先级是一样的，所以写到后面的会覆盖前面的值。为了避免出现类似情况，需要遵循这样一个顺序：:link、:visited 、:hover、:active，简称LVHA。
