おそらく、レイアウトに関与してスタイルシートに直面している多くの人々は、瞬間がありました！重要なものが座っていた！その後、中断されました（またはその逆）。 そして、なぜこれが起こっているのかは明らかではありません。
カスケードスタイルとセレクターの特異性を一度だけ扱いましょう。
セレクターの特異性により、スタイルシートでの優先順位が決まります。 セレクターが具体的であればあるほど、その優先度は高くなります。
セレクタの優先度のカウントは非常に簡単です。
- インラインスタイルの特異性は1000
- 各識別子（＃） 0100に対して
- 各クラス（。）および擬似クラス（::、[]） 0010
- 各タグおよび擬似要素0001
- *およびブラウザスタイル0000
* {box-sizing: border-box} li {color:red} ul li {color:red} .list li {color:red} #list li {color:red} a[href^="http://"] {text-decoration: underline}
重要！追加すると
、優先度が支配的になります。 重要！
職業を変えることについて少し
考える価値が
ある場合
、彼らは同じ規則に従い始めます。
li {color:red !imporatnt} ul li {color:red}
li {color:red !imporatnt} ul li {color:red !imporatnt}
すべての操作の後、特異性は一致しました-最後の（下の）ルールが勝ちます。
そしてもちろん、
CSSアニメーションは、インラインスタイルよりも優先度が高くなっています！インラインスタイルでは重要です。
UPD 11のクラスが
ここで読み取られる識別子よりも高い優先度を持たない理由