除非我添加“!important”标签，否则更改不会生效。为什么？
我正在用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 */
}回答 2
Stack Overflow用户
发布于 2014-08-01 12:13:25
试用
.ur-namedivmore-specifc-divname ul.nav li a:hover {
background: #2E9AFE !important; /* This will Works */
color: white !important; /* This will Works */
}覆盖任何其他css文件(在本例中为bootstrap.css)或插件的属性！您需要使用更多指定父选择器来确定目标并覆盖这些属性。
Stack Overflow用户
发布于 2014-08-01 13:47:05
1)检查样式表的加载顺序。浏览器将以DOM的方式从上到下扫描每个样式表。
注意:如果一个相同的元素(class，id，tag等)存在于多个样式表中&&共享相同的属性(例如: background)，则将表示上次加载的样式表的相应值。(例如:如果bootstrap的背景li a: ul.nav { ul.nav：#ffffff;}和您的背景li a:hover {background：#2E9AFE;})，文档将显示它加载的最后一个样式表(文档中最低的样式表)。
2) !important警告将覆盖此级联规则。谨慎地使用它，它将覆盖任何在itself...unless之后级联的表，这些表也在同一元素的属性上使用！重要。
如果我猜的话，您很可能在bootstrap之前加载了'stylesheet.css‘样式表。
您的标记应按以下顺序排列：
<style src=".../bootstrap.css" />
<style src=".../style.css" /> 加载stylesheets属性后，尝试向您的导航锚点标记添加一个类，您希望将悬停效果应用于Ex：
/*style*/ .nav-hover-link { background: #2E9AFE; color: white;}
<!-- markup--> <a class="nav-hover-link"></a>*浏览器将能够比您的原始css更快地执行此任务，因为它将只查找特定的类，而不是必须查找所有无序列表、所有导航、所有列表，然后是所有锚点。
https://stackoverflow.com/questions/25072063
复制相似问题
腾讯云开发者
