摘要：由不同选择器组成的选择元素的方式暂且称之为规则吧。通过计算选择器的特殊性值，特殊性最高的规则将会胜出并被利用。内联样式特殊性为，因此内联声明的特殊性最高。标志为的声明并没有特殊的特殊性值，此时该声明为重要声明，超过所有非重要声明。
前言
通常我们在设置链接的一些伪类（link，visited，hover，active）样式时，要让不同的状态显示正确的样式，我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍，即 link-visited-hover-active，可记为 LoVe-HAte 。
要想弄明白为什么是这个顺序，首先我们需要知道，CSS在确定应当向一个元素应用哪些样式时，这通常不仅需要考虑 继承，还要考虑声明的 特殊性，另外需要考虑声明本身的来源，这个过程就成为 层叠。下面我们分别来看看 特殊性、继承 和 层叠 这3种机制之间的关联。
特殊性在实际的应用中，我们都知道一个元素可以通过多种选择器来进行选择，如ID选择器、类选择器等等，具体可看CSS选择器详解。由不同选择器组成的选择元素的方式暂且称之为 规则 吧。考虑以下3对规则，当然每对规则都选择同样的元素：
/* 规则1 */
h1 {
color: red;
}
body h1 {
color: purple;
}
/* 规则2 */
h2.grape {
color: purple;
}
h2 {
color: silver;
}
/* 规则3 */
html > body table tr[id="totals"] td ul > 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 的声明并没有特殊的特殊性值，此时该声明为重要声明，超过所有非重要声明。
通过以上的介绍，我们就可以计算出本节刚开始介绍的3组规则的特殊性值及被应用的规则：
/* 规则1 */
h1 { /* 0,0,0,1 */
color: red;
}
body h1 { /* 0,0,0,2 （元素应用该规则） */
color: purple;
}
/* 规则2 */
h2.grape { /* 0,0,1,1 （元素应用该规则） */
color: purple;
}
h2 { /* 0,0,0,1 */
color: silver;
}
/* 规则3 */
html > body table tr[id="totals"] td ul > li { /* 0,0,1,7 */
color: maroon;
}
li#answer { /* 0,1,0,1 （元素应用该规则） */
color: navy;
}
继承
基于继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。下面的例子帮你了解继承是如何工作的：
ul {
color: red;
}
- ul下的第一个li
- ul下的第二个li
- ul下的第三个li
- ol下的第一个li
- ol下的第二个li
- ol下的第三个li
效果：
原理就是将声明 color: red; 应用到 ul 元素时，这个元素会采用该声明。然后将这个值再沿着文档树向下传播到后代元素，并一直继承，直到再没有更多的后代元素继承这个值为止。值绝对不会向上传播，也就是说，元素不会把值向上传递到其祖先。
重要：继承值是完全没有特殊性的，因此特殊性值为0,0,0,0的特殊性也比其高，说明继承值很容易被其他方式中的声明取代。
层叠在 特殊性 一节中我们预留了一个问题：如果特殊性相等的两个规则将如何确定应用？假设有以下规则：
h1 {
color: red;
}
h1 {
color: blue;
}
哪一个会占上风？这两个规则的特殊性都是0,0,0,1，所以它们的权重相等，都应当应用到元素，但这是不可能的，因为一个元素不可能既是红色又是蓝色（实际是蓝色）。因此这里 层叠 就出场了，先看看层叠规则：
下面分别介绍规则中后三条规则。
按权重和来源排序根据第二条规则，如果两个样式规则应用到同一个元素，而且其中一个规则有 !important 标志，这个重要规则将胜出.
p {
color: gray !important;
}
Well, hello there!
效果：
Well, hello there!
另外，还要考虑规则的来源。来源权重由大到小的顺序依次为：
读者的重要声明（有 !important）
创作人员的重要声明（有 !important）
创作人员的正常声明
读者的正常声明
用户代理声明
按特殊性排序根据第三条规则，如果向一个元素应用多个彼此冲突的声明，而且它们的权重相同，则按特殊性排序，最特殊的声明最优先。
p#bright {
color: silver;
}
p {
color: black;
}
Well, hello there!
效果：
Well, hello there!
按顺序排序最后，根据第四条规则，如果两个规则的权重、来源和特殊性完全相同，那么在样式表中后出现的一个会胜出。
h1 {
color: red;
}
h1 {
color: blue;
}
我是蓝色的标题1
效果：
好了，通过前面的介绍，我想大家应该基本了解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 这样的一个顺序，起到的效果是 只有未访问的链接会有悬停样式，已访问的链接没有悬停样式。
最后，由于可以把伪类链接起来，所以可以不必担心这些问题。以下规则可以任何顺序列出，而不必担心有什么负面影响：
: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在确定应当向一个元素应用哪些样式时的一些基本原理。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112751.html
摘要：使用带前缀的命名空间可以防止命名冲突，同时提高代码可维护性。声明结束每行都应以分号结尾。排查法检查是否正确检查下有拼写错误是否忘记结尾的等。可以利来检查的拼写错误。本是为减肥的具，但也能检查出拼写错误。 ID和Class命名风格 1.id 和 class 的命名总规则为：内容优先，表现为辅。⾸先根据内容来命名，⽐如 main-nav。如 果根据内容找不到合适的命名，可以再结合表现来定，...
摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...
摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。 《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！ 项目...
阅读 1659·2021-11-16 11:41
阅读 2456·2021-11-08 13:14
阅读 3105·2019-08-29 17:16
阅读 3077·2019-08-29 16:30
阅读 1842·2019-08-29 13:51
阅读 355·2019-08-23 18:38
阅读 3222·2019-08-23 17:14
阅读 628·2019-08-23 15:09
