:onhover 伪类没有按预期工作

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 应用于锚的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;
}