一个a：悬停样式不起作用

Question

这是我的代码：

.header li a:hover {
  color:black;  
  background-color:red;  
  text-decoration:none; 
  font-size:1.25em;
}

这是网站：

http://grantfranken.com

在我添加text-decoration和font-size样式之前，color和background-color样式正常运行。一旦我添加了其他样式，他们就停止了工作。我该如何解决这个问题？风格的顺序是否重要？

Answer 1

您的问题是pseudo-classes的{​​{1}}的顺序。

你有这个：

a

相反，你应该这样：

.header li a:hover {color:black;  background-color:red;  text-decoration:none; font-size:1.25em;}

.header li a:link {color:red;  background-color:black;}

.header li a:visited {color:red;  background-color:black;}

记住这一点：

链接，访问，悬停，有效
L，V，H，A
LoVe，HAte

Answer 2

您的样式排序错误。

.header li a:hover {color:black;  background-color:red;  text-decoration:none; font-size:1.25em;}

.header li a:link {color:red;  background-color:black;}

.header li a:visited {color:red;  background-color:black;}

  

a:hover必须在CSS定义中a:link和a:visited之后   为了有效!!   a:active MUST come after a：在CSS定义中使用hover`以便有效!!

所以

.header li a:link {color:red;  background-color:black;}

.header li a:visited {color:red;  background-color:black;}

.header li a:hover {color:black;  background-color:red;  text-decoration:none; font-size:1.25em;}