背景色转换不起作用

Question

我遇到了背景颜色转换的问题：如果我在CSS中定义对象的背景然后添加转换到它，它运行良好，但如果我在HTML中做同样的事情，我什么都不做......代码是：

＆＃13;

＆＃13;

.container a {
  background-color: #333;
  transition: background-color 0.2s;
}

.container a:hover {
  background-color: red;
}

＆＃13;

<div class="container">
  <a href="#">Login</a>
  <!-- This works well-->
  <a href="#" style="background-color: green">Login</a>
  <!-- This does not-->
</div>

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？

Answer 1

内联样式的specificity最高，因此您的规则未被应用。您可以通过不使用内联样式或将可怕的!important应用于规则来解决这个问题

＆＃13;

＆＃13;

.container a {
  background-color: #333;
  transition: background-color 0.2s;
}

.container a:hover {
  background-color: red !important;
}

＆＃13;

<div class="container">
  <a href="#">Login</a>
  <!-- This works well-->
  <a href="#" style="background-color: green">Login</a>
  <!-- This does not-->
</div>

＆＃13;

＆＃13;

＆＃13;