背景颜色转换不起作用

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>