html - 表格文本悬停和链接颜色

Question

我有 html 表格和布局(类似的东西，我也使用 haml+sass):

.zebra{
 .zebra-stripe{
  &.zebra1{
  a{
    color: red;
  }
  a:hover{
    color: blue;
  }
 }
}

我的 htm 表有 zebra 类，tr 有 .zebra-stripe .zebra1 类

但是我有其他样式的链接(比如按钮)，这个链接有自己的背景高度，但是悬停时颜色设置为橙色，

.details-link{
  width: 70px;
  margin: 2px;
}
.details-link:hover{
  color: orange;
}

但是当我的鼠标悬停在这个链接上时，它的颜色不是橙色，而是为表格设置的蓝色……怎么了？

如何将链接悬停文本颜色设置为橙色(我设置了它，但无法正常查看)...

如果有什么不清楚的地方，请在评论中告诉我...

Answer 1

你的问题是你正在使用的选择器的特殊性，.zebra .zebra-stripe.zebra1 a:hover 比 .details-link:hover 更具体>。请尝试以下操作，让您的选择器更具体:

.zebra .zebra-stripe.zebra1 a.details-link:hover {
    color: orange;
}