为什么我的css对a:link、a:visited、a:hover、a:active不生效？

Question

我有一个表格，其中有一列，

<table>
   <tr>
     <td width="30"  class="top-nav"><a href="#">Home</a></td>
     <td width="30" class="top-nav"><a href="#">About</a></td>
     <td width="30" class="top-nav"><a href="#">Contact</a></td>
   </tr>
</table>

我希望 CSS 该列具有鼠标悬停效果，因此我执行了以下操作：

.top-nav a{
   display: block;
   padding: 3px;
   text-decoration: none;

}

.top-nav a:link, .top-nav a:visited{
   color: #000000;
   background-color: #1d5987;

}
.top-nav a:hover, .top-nav a:active{
   color: #ffffff;
   background-color: #666666;

}

但是我的 CSS 对 a:link 、a:visited、a:hover、 a:active 表格单元格的背景和字体颜色发生变化，为什么？

Answer 1

如果您删除此处多余的 ,

.top-nav a:visited,

和

.top-nav a:active,

请参阅示例： http://jsfiddle.net/jasongennaro/ZSbdH/