CSSカスケードと特異性

おそらく、レイアウトに関与してスタイルシートに直面している多くの人々は、瞬間がありました！重要なものが座っていた！その後、中断されました（またはその逆）。 そして、なぜこれが起こっているのかは明らかではありません。



カスケードスタイルとセレクターの特異性を一度だけ扱いましょう。



セレクターの特異性により、スタイルシートでの優先順位が決まります。 セレクターが具体的であればあるほど、その優先度は高くなります。

セレクタの優先度のカウントは非常に簡単です。

• インラインスタイルの特異性は1000
• 各識別子（＃） 0100に対して
• 各クラス（。）および擬似クラス（::、[]） 0010
• 各タグおよび擬似要素0001
• *およびブラウザスタイル0000

* {box-sizing: border-box} /*  0000 */ li {color:red} /*  0001*/ ul li {color:red} /*  0002*/ .list li {color:red} /*  0011*/ #list li {color:red} /*  0101*/ a[href^="http://"] {text-decoration: underline} /*  0011 */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

重要！追加すると、優先度が支配的になります。 重要！ 職業を変えることについて少し考える価値がある場合、彼らは同じ規則に従い始めます。

 li {color:red !imporatnt} /*  0001 - win*/ ul li {color:red} /*  0002*/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 li {color:red !imporatnt} /*  0001*/ ul li {color:red !imporatnt} /*  0002 - win*/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべての操作の後、特異性は一致しました-最後の（下の）ルールが勝ちます。



そしてもちろん、 CSSアニメーションは、インラインスタイルよりも優先度が高くなっています！インラインスタイルでは重要です。



UPD 11のクラスがここで読み取られる識別子よりも高い優先度を持たない理由