Inline-Stil mit 11 gestapelten IDs überschreiben und eine Klasse

Wenn ein Inline-Stil eine css-Spezifität von 1000 und IDs eine Spezifität von 100 aufweist, sollte das Überlagern von 11 IDs mit einer Klasse den Inline-Stil überschreiben, ohne die! .Inline-Stil mit 11 gestapelten IDs überschreiben und eine Klasse

Also, warum funktioniert das nicht? Ich dachte, CSS hätte ein Punktesystem, bei dem die höchste Zahl gewinnt.

<!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>

Quelle

2016-04-18 sneilan

Nein ... weil Inline-Styling die letzte ist, gewinnt es. –

In der Tat - ich würde mich nicht auf CSS-spezifische Punktwerte konzentrieren, da sie nicht immer intuitiv sind. –

So hat die CSS Spezifität Algorithmus nicht alle Punktattribute zusammenzufassen, wo Inline-Stil: 1000 -ID: 100 Klasse: 10 Element: 1 Und dann die hinzugekommenen sortieren? Es ist im Grunde nach 4 verschiedenen Eimern von Inline, ID, Klasse und dann Element sortiert? – sneilan

Nein ... weil Inline-Styling kommt in der ‚Kaskade“ letztes und so gewinnt es unabhängig von der Spezifität

Es kann nur durch Zugabe von !important außer Kraft gesetzt werden. .

In der Tat

das ist alles würden Sie brauchen.

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>

Quelle

2016-04-18 14:54:55

Verstanden. Der Algorithmus selbst sortiert die Kaskadierung der einzelnen Selektoren. Es wird nicht sortiert, indem die Punktwerte der Selektoren hinzugefügt und anschließend sortiert werden. Daher können eine Million Klassen niemals eine ID überschreiben. – sneilan

Im Wesentlichen ja. Sehen Sie dies - https://jsfiddle.net/unnoyk65/1/ –

Soweit ich weiß, Sie können nicht inline CSS mit IDs außer Kraft setzen. Allerdings könnten Sie so etwas tun:

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

Quelle

2016-04-18 14:52:07 Matko95

Inline-Stil mit 11 gestapelten IDs überschreiben und eine Klasse

Antwort

Verwandte Themen