前言通常我们在设置链接的一些伪类（link、visited、hover、active）样式时，需要按照一定的顺序让不同的状态显示正确的样式这些样式伪类。这里我按照CSS2规范推荐的顺序介绍，即link-visited-hover-active，可以记为LoVe-HAte。要理解为什么是这样的顺序，我们首先要知道，CSS在决定一个元素应该应用哪些样式时，通常需要考虑的不仅仅是继承，还有声明的特殊性，以及声明本身的来源.这个过程称为级联。我们先来看看专一性、继承性和级联这三种机制之间的关系。特殊性在实际应用中，我们都知道一个元素可以被多种选择器选择，比如ID选择器、类选择器等，具体参见CSS选择器详解。这种选择由不同选择器组成的元素的方式暂且称为规则。考虑以下3对规则，当然每对选择相同的元素：/*规则1*/h1{color:red;}bodyh1{color:purple;}/*rule2*/h2.grape{color:purple;}h2{color:silver;}/*Rule3*/html>bodytabletr[id="totals"]tdul>li{color:maroon;}li#answer{color:navy;}显然，每个只有一对规则获胜，因为匹配的元素只能是特定颜色。那么你怎么知道哪个规则更强呢？答案在于每个选择器的特殊性。通过计算选择器的特异性值，最具体的规则将获胜并被使用。这里先留一个问题，这两个等特异性的规则将如何应用呢？后面会介绍级联。具体值具体值用4个部分表示，如：0,0,0,0。选择器的具体特殊性是通过为选择器中给定的每个ID属性值添加0,1,0,0来确定的。为选择器中给定的每个类属性值、属性选择或伪类添加0,0,1,0。将0,0,0,1添加到选择器中给定的每个元素和伪元素。关联符和通配符选择器*对特异性没有任何贡献，再加上0,0,0,0。内联样式特异性为1,0,0,0，因此内联声明具有最高特异性。标记为!important的声明没有特殊的特异性值，此时它是一个重要的声明，覆盖所有不重要的声明。通过上面的介绍，我们可以计算出本节开头介绍的三组规则的特异性值以及应用的规则：/*rule1*/h1{/*0,0,0,1*/color:red;}bodyh1{/*0,0,0,2（元素应用此规则）*/color:purple;}/*rule2*/h2.grape{/*0,0,1,1（元素元素应用规则)*/color:purple;}h2{/*0,0,0,1*/color:silver;}/*rule3*/html>bodytabletr[id="totals"]tdul>li{/*0,0,1,7*/color:maroon;}li#answer{/*0,1,0,1（元素应用此规则）*/color:navy;}继承基于继承机制和样式不仅适用于指定的元素，也适用于它的后代元素。这里有一个例子可以帮助你理解继承是如何工作的：ul{color:red;}

效果：原理是应用声明color:red;对于ul元素，该元素将采用声明。然后这个值沿着文档树传播到后代元素并被继承，直到没有更多的后代元素继承这个值。值从不向上传播，即元素不会向上传递值给它们的祖先。重要：继承值是完全不特定的，所以0,0,0,0的特定值也比它高，说明继承值很容易被其他方法中的声明替换。级联在特异性部分，我们提出了一个问题：如何应用两个具有相同特异性的规则？假设有如下规则：h1{color:red;}h1{color:blue;}哪一个为准？这两个规则的特殊性都是0,0,0,1，所以它们的权重相等，应该都应用于元素，但这是不可能的，因为一个元素不能同时是红色和蓝色（实际上是蓝色）。因此，级联在这里发挥作用。先来看看级联规则：下面介绍规则中的最后三个规则。按权重和来源排序根据第二条规则，如果两个样式规则应用于同一元素，并且其中一个具有!important标志，则该重要规则将获胜。p{color:gray!important;}好吧，你好！

效果：好吧，你好！

另外，考虑规则的来源的。源权重从大到小的顺序为：读者重要声明（带!important）作者重要声明（带!important）作者正常声明读者正常声明用户代理声明按照第三条规则按特异性排序，如果多个冲突声明应用于一个元素并且它们具有相同的权重，它们按特异性排序，最具体的声明优先。p#bright{color:silver;}p{color:black;好吧，你好！

效果：好吧，你好!

按顺序排序最后，根据第四条规则，如果两条规则具有完全相同的权重、来源和特异性，则样式表中最后出现的规则获胜。h1{color:red;}h1{color:blue;

我是蓝色title1

效果：我是蓝色title1的顺序链接样式很好。通过前面的介绍，我想大家应该对CSS如何决定一个元素应该应用哪些值有了一个基本的了解。回到前言中提到的链接样式的顺序，为了正确表达设置的样式，我们必须按照一定的顺序设置样式。根据CSS2规范中的推荐顺序，link-visited-hover-active，声明样式如下：:link{color:blue;}:visited{color:purple;}:hover{color:red;}:active{color:orange;}根据前面的介绍，以上选择器的特异性都是一样的：0,0,1,0。因此它们具有相同的权重、来源和特异性，因此最后一个匹配该元素的选择器获胜。一个未访问的链接被“点击”可以匹配这些规则中的3个——:link、:hover、:active，所以按照上面的声明顺序，:active将获胜，这可能是我们所期望的。假设我们忽略这个通常的顺序，而是按字母顺序排列链接样式，声明样式如下::active{color:orange;}:hover{color:red;}:link{color:blue;}:visited{color:purple;}使用此命令，不会在:hover或:active上显示任何链接，因为:link和:visited规则紧随其后。所有链接都必须访问过（:visited）或未访问过（:link），因此:link和:visited样式将始终覆盖:hover或:active。当然链接样式也可以根据自己的实际需要设置一定的顺序，比如link-hover-visited-active，效果是只有未访问过的链接才会有hover样式，访问过的链接没有hover风格。最后，由于您可以链接伪类，您不必担心这些问题。以下规则可以按任何顺序列出而不用担心任何副作用：:link{color:blue;}:visited{color:purple;}:link:hover{color:red;}:visited:hover{color:gray;}:link:active{color:orange;}:visited:active{color:silver;}结语通过回答为什么链接样式的顺序是link-visited-hover-active，希望能帮助大家加深对CSS的理解在确定应将哪些样式应用于元素的一些基本原理。