11個のスタックIDとクラスを持つインラインスタイルのオーバーライド

インラインスタイルのCSSの特定性が1000で、IDの固有性が100の場合、！important宣言を使用せずにインラインスタイルをオーバーライドする必要があります。11個のスタックIDとクラスを持つインラインスタイルのオーバーライド

なぜ、これは機能しませんか？私は、CSSがポイントシステムを持っていて、最も高い数字が勝つと思っていました。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>title</title> 
    <style> 
     #a > #b > #c > #d > #e > #f > #g > #h > #i > #j > #k > div.foo { 
      background-color: red; 
     } 


    </style> 
    </head> 

    <body> 
     <div id="a"> 
      <div id="b"> 
       <div id="c"> 
        <div id="d"> 
         <div id="e"> 
          <div id="f"> 
           <div id="g"> 
            <div id="h"> 
             <div id="i"> 
              <div id="j"> 
               <div id="k"> 
                <div style="background-color: blue;" class="foo">FOOOO</div> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

出典

2016-04-18 sneilan

いいえ...インライン・スタイリングが最後に来るので勝ちます。 –

確かに、私はCSSの特異点の値に焦点を当てません。なぜなら、それらは必ずしも直感的ではないからです。 –

だから、CSS特異アルゴリズムは、すべてのポイントの属性を合計しない場合インラインスタイル：1000 ID：100 クラス：10 要素：1 そして追加されたものを並べ替えますか？基本的にインライン、ID、クラス、要素の4種類のバケットでソートされていますか？ – sneilan

ありませんが...

をそれだけで!importantを追加することでオーバーライドすることができますあなたが必要とするだろうすべてです実際には。

。

div.foo { 
 
    background-color: red !important; 
 
}

<body> 
 
    <div id="a"> 
 
    <div id="b"> 
 
     <div id="c"> 
 
     <div id="d"> 
 
      <div id="e"> 
 
      <div id="f"> 
 
       <div id="g"> 
 
       <div id="h"> 
 
        <div id="i"> 
 
        <div id="j"> 
 
         <div id="k"> 
 
         <div style="background-color: blue;" class="foo">FOOOO</div> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-04-18 14:54:55

入手しました。したがって、アルゴリズム自体は個々のセレクタでカスケードをソートします。セレクタのポイント値を加算してソートすることはありません。したがって、100万のクラスでIDを上書きすることはできません。 – sneilan

本質的に、はい。これを見てください - https://jsfiddle.net/unnoyk65/1/ –

インラインCSSをIDで上書きすることはできません。しかし、あなたはこのような何か行うことができます：。インラインスタイリングは「カスケード」で最後になるので、それは関係なく、特異性の勝利ので

div[style] { 
background-color: yellow !important; 
}

出典

2016-04-18 14:52:07 Matko95

11個のスタックIDとクラスを持つインラインスタイルのオーバーライド

答えて

関連する問題