:onhover pseudo-class 没有按预期工作

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]    

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

我在某处看到:hover伪class应该只应用于a元素，但是我看了W3C wiki，没有提到这个那里。我可以用这种方式将 :hover 应用于锚点的 li 父级吗？还是非法代码？ Bootstrap and/or 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;
}