CSSの優先順位がわかりません

CSSの詳細度はきっちり理解しておきましょう。詳細度を計算するツールも紹介しています。
2020年5月17日
ユーザー

#choices > li:hover {
background-color: #f8f8f8;
}

#choices > li.correct {
background-color: #F8D8DA;
}

.wrong {
background-color: #D5EDDA;
}

 この動画では、正解であれば correct を、間違いであれば wrong のクラス名を追加する設定をしています。デモだけ見ながら作っていたところ自分では、「.wrong」と書きました。そうしたところ、「#choices > li:hover」が有効化されており、マウスホヴァーが無効化できません。

伺いたいことは、動画で教えられている「#choices > li.correct」と「.wrong」の違いを知ることです。

宜しくお願いします。

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?