背景色の遷移が機能しない

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を持つため、ルールは適用されません。あなたはそれがうまく機能、ありがとう

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