html - 整个页面受悬停效果影响

Question

正如标题所说，我的链接得到了悬停效果，但由于某种原因整个页面都受到了影响。

这是我的风格

a:hover, :visited, :active, :hover
{
color:#fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
text-decoration: none;
color: #009933;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}

https://jsfiddle.net/3qpbv5fo/

顺便说一句，当你在做的时候。到目前为止我的代码可读吗？如果您必须继续构建网站，您会明白我在做什么吗？只是为了让我变得更好。

Answer 1

你在说 :hover 之前没有元素，所以它指的是一切。

仅在第一个选择器中选择 a 元素是不够的，如果您在事物之间放置逗号，它们将被视为完全独立的选择器。例如，a:hover, :hover 将被读作 a:hover 和 *:hover。

参见 this有关如何正确设置链接样式的指南。