アクティブなCSS疑似クラスは、後ろにホバーを書くと動作しません。

Question

アクティブの前にホバーを書くと、アクティブなスタイルが機能します。ちょうどこのように

<div class="E">123123</div> 

    <style> 
     .E { 
      width: 200px; 
      height: 200px; 
      background-color: red; 
     } 
     .E:hover { 
      background-color: blue; 
     } 
     .E:active { 
      background-color: black; 
     } 
    </style> 

マウスを動かすと、divが青色に変わり、それをクリックすると黒色に変わります。

問題が発生しています。私がアクティブでホバリングの位置を変えたら。

<style> 
     .E:active { 
      background-color: black; 
     } 
     .E:hover { 
      background-color: blue; 
     } 
    </style> 

divをクリックするか、divをクリックすると、常に色が青色になります。

なぜですか？

Answer 1

HarryとMr Listerは両方とも同じ特異性を持っていると言いました。最新のものが勝つので、あなたができることは特定のCSSをアクティブにすることです。

したがって、.E:activeの代わりにdiv.E:activeを試してください。この場合、両方とも動作します。

更新されたコード

.E { 
      width: 200px; 
      height: 200px; 
      background-color: red; 
     } 
     div.E:active { 
      background-color: black; 
     } 

     .E:hover { 
      background-color: blue; 
     } 

それがうまくいく理由：最後のオプションは、ホバーであるように、背景が青色になりますが、我々は（DIVで）特定のCSSを使用している、それはクリックで黒色を表示しますあまりにも。また、色を参照してください。

はaction