背景颜色过渡不起作用

Question

我对背景颜色过渡有疑问：如果我在 CSS 中定义对象的背景，然后将过渡添加到它，效果很好，但如果我在 [=23] 中做同样的事情=], 我什么都不做...代码是：

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

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

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

有什么想法吗？

Answer 1

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

来解决这个问题

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

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

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

背景颜色过渡不起作用

Background-color transition doesn't work

html

css

transition

background-color