CSS选择器的特殊性和LOVE HA

　　在CSS中当几个相同的选择器对同一个元素有不同的规则时，该怎么应用这些规则呢？

　　答案就是：CSS特殊性（CSS specificity）

　　选择器特殊性有选择器本身组成，特殊性由4个数值表述：0， 0， 0， 0，具体特殊性如下：

1. 对于内联样式声明的特殊性时，加1， 0， 0， 0
2. 对于选择器中有给定的ID属性值时，加0， 1， 0， 0
3. 对于选择器中有给定的类属性值、属性选择或伪类，加0， 0， 1， 0
4. 对于选择器中有各个给定的元素和伪元素时，加0， 0， 0， 1
5. 结合符和通配符对特殊性没有任何贡献即0， 0， 0， 0

从左到右，属性权重越来越低，1，0，0，0大于任何第一个0开头的特殊值如0，0，0，13

特殊值实例：

#id                         /*0,1,0,0*/
.className {}               /*0,0,1,0*/
[attr]                      /*0,0,1,0*/
[attr="value"]              /*0,0,1,0*/
element {}                  /*0,0,0,1*/
h1{}                        /*0,0,0,1*/

html > body td[id="totals"] tr ul > li {声明}             /*0,0,1,5*/
li#answer {声明}                                          /*0,1,0,1*/ (winner)

h1#selec{声明}                                            /*0,1,0,1*/
<h1 style="color: red">element</h1>                       /*1,0,0,0*/ (winner)
内联样式特殊性最高

重要性：

　　某个样式声明非常重要，可以在声明的结束分号之前加上！important来标志。

p.class {color: #222 !important}         /*winner*/
#id      {color: #333

首先，！important必须放到声明最后的分号之前，其次加了！important的声明与非重要声明分开考虑，

且声明冲突时，胜出的总是重要声明。

　　　

　　继承

　　继承没有特殊性

　　

*color｛color: red｝
h1#page-title {color: green}

<h1 id="page-title">out em<em>in em</em>out em</h1>

结果：
out em in em out em

　　通配选择符具有0特殊性，而继承无特殊性，所以em内为绿色

　　层叠

　　　如果元素选择符的特殊性相同：

1. 1. 按照！important来排序： 读者的重要声明 > 创作人员的重要声明 > 创作人员的正常声明 > 读者正常声明 > 用户代理声明
   2. 按照特殊性排序，较高的特殊性权重大于低的权重
   3. 按照出现顺序，后出现的权重大，样式表中的导入样式表在前，主样式表在后。

　　　正式由于这种顺序，才有了LOVE HA，一般链接样式按顺序link-visited-hover-active。（LVHA）来排序。

:link {}
:visited {}
:hover {}
:active {}

　　 　因为有相同的特殊性，0，0，1，0。所以与元素匹配的最后一个选择器才会胜出。

假如不按照常用的顺序
:active {}
:hover {}
:link {}
:visited {}

　　一个链接的link和visited两种样式肯定有一种会匹配，所以:active和:hover会被覆盖。

:link {}
:hover {}
:visited {}
:active {}
这个顺序下，被访问过的样式都不会有 :hover 样式，因为会被:visited覆盖。

也可以把伪类链接起来，所以可不必担心这些问题
:link {}
:visited {}
:link :hover {}
:visited :hover {}
每个规则都有唯一的链接状态所以不会冲突。