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

您导入了Bootstrap，它具有默认的CSS样式。你基本上做的是试图覆盖这些风格。但是，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。

Answer 2

正在发生的事情是像.container这样的父div（可能没有你的html结构）有background-color css。
此css将覆盖子hover元素上的<a> css。 !important关键字仅用于此目的。它不允许其他样式覆盖自身。
这就是为什么你应该在这种情况下使用!important关键字。

Answer 3

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

使用这个

Answer 4

是的，如果你这样给予

a {
  background-color: black !important;
}

！important 也会覆盖悬停状态样式。

 a {
      background-color: dfdfdf;
    }

不起作用。

给你这样的风格

a {
   background-color: black;
  }
//remove !important

从!important标记中删除<a>。悬停状态正常工作如果你有任何错误，请告诉我。

Answer 5

您的默认css文件包含其嵌套样式！快速解决此问题：为class分配<a>样式！

a.my-class {
  color: black;
   font-weight: bold;
}
a.my-class:hover {
  background-color: #dfdfdf;
}

`hover`伪类无法正常工作

5 个答案: