除非我提出＆＃34;否则变更不会生效。 ！important＆＃34;标签。为什么？

Question

我在CSS中制作一个简单的导航栏。在我的自定义StyleSheet（style.css）中，以下更改不会生效。我在HTML标记中使用了Bootstrap：

ul.nav li a:hover {
    background: #2E9AFE; /* Don't work in style.css*/
    color: white; /* Don't work in style.css*/
    }

但是当我放置!important标签时，它会起作用。为什么它不适用于前一个？

ul.nav li a:hover {
    background: #2E9AFE !important; /* This Works */
    color: white !important; /* This Works */
}

Answer 1

尝试

 .ur-namedivmore-specifc-divname ul.nav li a:hover {
       background: #2E9AFE !important; /* This will Works */
       color: white !important; /* This will Works */
}

过度使用任何其他css文件（在你的案例中为bootstrap.css）或插件的属性！您需要使用更具体的父选择器来定位和覆盖属性。

Answer 2

1）检查样式表加载的顺序。通过DOM的浏览器将按从上到下的顺序扫描每个样式表。

注意：如果多个样式表中存在相同的元素（类，id，标签等），并且＆amp;＆amp;共享相同的属性（例如：背景），将表达最后加载的样式表的相应值。 （例如：如果 bootstrap的 ul.nav li a：hover {background：#ffffff;}和你的 ul.nav li a：hover {background：＃2E9AFE;}） ，文档将显示它加载的最后一个文档（文档中最低的样式表）。

2）！important 警告将覆盖此级联规则。谨慎使用它，并谨慎使用，它将覆盖任何自身级联的纸张......除非这些纸张在同一元素的属性上也使用！important。

如果我猜测，你可能在bootstrap之前加载了'stylesheet.css'样式表。

您的标记应按此顺序排列：

<style src=".../bootstrap.css" />
<style src=".../style.css" />    

加载样式表属性后，尝试将类添加到希望将悬停效果应用于的导航锚标记中   例如：

/*style*/  .nav-hover-link { background: #2E9AFE; color: white;}
<!-- markup--> <a class="nav-hover-link"></a>

***浏览器能够比原始css更快地执行此任务，因为它只会查找特定的类，而不必查看所有无序列表，所有导航，所有列表，然后所有的锚点。