html - 背景颜色过渡不起作用

Question

我对背景颜色转换有疑问:如果我在 CSS 中定义对象的背景，然后将转换添加到它，效果很好，但如果我在 HTML 中做同样的事情，我什么都不做......代码是:

.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>