背景顏色轉換不起作用

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>