html - `hover` 伪类不工作

Question

这是我的css文件，到现在为止我做了一个简单的导航栏。但重点是我的 <a>导航栏中的元素，当我尝试为它们设置样式以防万一 a和 a:hover它们只有在我给出 !important 时才起作用.怎么了。有特异性问题吗？

@import url('http://fonts.googleapis.com/css?family=Lato');

.navbar {
  background-color: #b6b5b4;
  border-style: solid;
}

.container {
  background-color: #bfbfbf;
}

body {
  font-family: Lato;
}

a {
  color: black !important;
  font-weight: bold;
}

.navbar-right {
  background-color: #aeaeae;
}

a:hover {
  background-color: #dfdfdf !important;
}

我是 css 和 html 的新手。

Answer 1

您导入了具有默认 CSS 样式的 Bootstrap。你基本上在做什么，是试图覆盖这些样式。但是，Bootstrap 似乎优先于您的 CSS(可能是由于 HTML 文件中导入的顺序)，因此需要 !important。 !important 标签确保特定样式不会被覆盖，或者始终显示在其他样式之上。

<link rel="stylesheet" type="text/css" href="main.css"> 
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

如果您的排序是这样的，Bootstrap 样式将被显示，除非您使用 !important。