css :hover 样式失效的根本原因
学习前端开发过程中，常常会遇到 :hover 样式失效的情况。例如，以下代码：
你好
a {
text-decoration: none;
}
a:hover {
color: coral;
}
鼠标悬停在 标签上时，颜色并没有变为珊瑚色。这是为什么呢？
CSS 选择器优先级与权重
问题在于 CSS 选择器的优先级机制。当多个选择器作用于同一个元素时，优先级高的选择器会覆盖优先级低的选择器。
立即学习“前端免费学习笔记（深入）”；
在本例中，a 选择器和 a:hover 选择器都作用于 元素。虽然 a:hover 只有在鼠标悬停时才生效，但 a 选择器由于在样式表中先出现，且优先级更高，导致其样式覆盖了 a:hover 的样式。
选择器权重的计算
CSS 选择器优先级由一个权重系统决定，通常用四位数字表示 (a, b, c, d)，其中：
本例中选择器的权重
-
a选择器：权重为 (0, 0, 1, 0) -
a:hover选择器（鼠标未悬停）：权重为 (0, 0, 0, 0) -
a:hover选择器（鼠标悬停）：权重为 (0, 0, 1, 0) (因为此时a元素被选中)
当鼠标未悬停时，a:hover 的权重低于 a，所以失效。即使鼠标悬停，a:hover 的权重与 a 相同，但由于 a 在样式表中先出现，所以依然被 a 覆盖。
为了使 a:hover 生效，可以调整样式表的顺序，将 a:hover 放在 a 之后，或者使用更具体的或权重更高的选择器来定义 a:hover 样式。
