css - ホバーされてフォーカスされているフィールドの CSS の順序は何ですか

Question

入力がフォーカスされてホバーされたとき、入力は何色になりますか?

input:hover {
  color: red;
}

input:focus {
  color: blue;
}

Answer 1

input:hover {
  color: red;
}

input:focus {
  color: blue;
}

デモでは、入力がフォーカスされ、CSS が:focus最後にリストされているため、入力は青色になります。

これらの 2 つのルール セットを逆にすると、:hover最後にあるため、入力は赤になります。