css - :onhover pseudo-class not working as expected

Question

我有一段我写的代码，我把它放在一段缩小的 CSS 之上:

.scroll-fixed-navbar {
  background-color: black !important;
}

.banner-list li i {
  color: #f86900 !important;
}

.btn-primary {
  background-color: #f86900 !important;
}

#nav li a {
  color: #f1861d !important;
}

#nav li:hover {
  color: #a8a89b !important;
}

[Huge chuck of minified code containing Font Awesome and Twitter Bootstrap]    

在一台服务器上，这按预期工作，链接项在悬停时淡化为灰色。然而，在另一台服务器上，悬停效果不会触发。我试过在检查器中打开 li 元素，但即使在效果正常的服务器上，CSS 似乎也没有显示:

我在某处看到:hover伪类应该只应用于a元素，但是我查看了W3C wiki，并没有提到这个那里。我可以通过这种方式将 :hover 应用于 anchor 的 li 父级吗？还是非法代码？ Bootstrap 和/或 Font Awesome 代码是否会覆盖 CSS？或者问题可能是由其他原因引起的？

Answer 1

我认为:

#nav li a {
  color: #f1861d !important;
}

正在覆盖这个:

#nav li:hover {
  color: #a8a89b !important;
}

为什么要在li上设置:hover？尝试在 li:hover 之后定位 a 元素:

 #nav li:hover a {
  color: inherit !important;
}