Wie ist die Rangfolge für CSS?

Ich versuche herauszufinden, warum eine meiner CSS-Klassen die andere zu überschreiben scheint (und nicht umgekehrt).

Hier habe ich zwei CSS-Klassen

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

und aus meiner Sicht rufe ich an

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

Die Schriftart (das überlappende Element) wird als 10 statt 20 Pixel angezeigt. Kann jemand erklären, warum dies der Fall ist?

Es gibt verschiedene Regeln (in dieser Reihenfolge angewendet):

1. Inline-CSS (HTML-Stilattribut) überschreibt CSS-Regeln in Stil-Tags und CSS-Dateien
2. Ein spezifischerer Selektor hat Vorrang vor einem weniger spezifischen
3. Regeln, die später im Code erscheinen, überschreiben frühere Regeln, wenn beide dieselbe Spezifität haben.
4. Eine CSS-Regel mit hat !importantimmer Vorrang.

In Ihrem Fall gilt die Regel 3.

Spezifität für einzelne Selektoren vom höchsten zum niedrigsten:

• IDs (Beispiel: #mainwählt aus <div id="main">)
• Klassen (Bsp .: .myclass), Attributselektoren (Bsp .: [href=^https:]) und Pseudoklassen (Bsp .: :hover)
• Elemente (Bsp .: div) und Pseudoelemente (Bsp .: ::before)

Um die Spezifität von zwei kombinierten Selektoren zu vergleichen, vergleichen Sie die Anzahl der Vorkommen einzelner Selektoren für jede der oben genannten Spezifitätsgruppen.

Beispiel: Vergleiche #nav ul li a:hovermit#nav ul li.active a::after

• Zählen Sie die Anzahl der ID-Selektoren: Für jeden gibt es einen ( #nav)
• Zählen Sie die Anzahl der Klassenselektoren: Es gibt einen für jeden ( :hoverund .active)
• Zählen Sie die Anzahl der Elementselektoren: Es gibt 3 ( ul li a) für den ersten und 4 für den zweiten ( ul li a ::after), daher ist der zweite kombinierte Selektor spezifischer.

Ein guter Artikel über CSS-Selektor-Spezifität .

Hier ist eine Zusammenstellung der CSS-Stilreihenfolge in einem Diagramm, in dem CSS-Regeln eine höhere Priorität haben und Vorrang vor den anderen haben:

Haftungsausschluss : Mein Team und ich haben dieses Stück zusammen mit einem Blog-Beitrag ( https://vecta.io/blog/definitive-guide-to-css-styling-order ) ausgearbeitet, von dem ich denke, dass er für alle Frontends nützlich sein wird Entwickler.

Was wir hier betrachten, heißt Spezifität, wie von Mozilla angegeben :

Die Spezifität ist das Mittel, mit dem Browser entscheiden, welche CSS-Eigenschaftswerte für ein Element am relevantesten sind und daher angewendet werden. Die Spezifität basiert auf den Übereinstimmungsregeln, die sich aus verschiedenen Arten von CSS-Selektoren zusammensetzen.

Die Spezifität ist ein Gewicht, das auf eine bestimmte CSS-Deklaration angewendet wird und durch die Nummer jedes Selektortyps im passenden Selektor bestimmt wird. Wenn mehrere Deklarationen gleich spezifisch sind, wird die zuletzt im CSS gefundene Deklaration auf das Element angewendet. Die Spezifität gilt nur, wenn auf dasselbe Element mehrere Deklarationen abzielen. Gemäß CSS-Regeln haben direkt ausgerichtete Elemente immer Vorrang vor Regeln, die ein Element von seinem Vorfahren erbt.

Ich mag die 0-0-0 Erklärung unter https://specifishity.com :

Ganz beschreibend das Bild der !importantRichtlinie! Manchmal ist dies jedoch die einzige Möglichkeit, das Inline- styleAttribut zu überschreiben . Es ist also eine bewährte Methode, beides zu vermeiden.

Zunächst @extendscheint es , basierend auf Ihrer Direktive, dass Sie kein reines CSS verwenden, sondern einen Präprozessor wie SASS os Stylus.

Wenn wir nun über "Rangfolge" in CSS sprechen, gibt es eine allgemeine Regel: Alle Regeln, die nach der Anwendung anderer Regeln (von oben nach unten) festgelegt wurden. In Ihrem Fall können Sie die Priorität Ihrer Regeln ändern , indem Sie einfach angeben, .smallboxnachdem .smallbox-paysummarySie dies getan haben.

Wenn Sie jedoch etwas weiter gehen möchten, empfehle ich folgende Lektüre: CSS-Kaskaden-W3C-Spezifikation . Sie werden feststellen, dass die Priorität einer Regel basiert auf:

1. Der aktuelle Medientyp;
2. Bedeutung;
3. Ursprung;
4. Spezifität des Selektors und schließlich unsere bekannte Regel:
5. Welches ist letzteres angegeben.

AS ist Status in W3: W3 Cascade CSS

Die Reihenfolge, in der verschiedene Stylesheets angewendet werden, lautet wie folgt (Zitat aus dem W3-Kaskadenabschnitt):

1. Benutzeragentendeklarationen

2. normale Benutzererklärungen

3. Autor normale Erklärungen

4. Autor wichtige Erklärungen

5. Benutzer wichtige Erklärungen

Weitere Informationen hierzu finden Sie im verwiesenen W3-Dokument

Die Reihenfolge, in der die Klassen im HTML-Element angezeigt werden, spielt keine Rolle. Was zählt, ist die Reihenfolge, in der die Blöcke im Stylesheet angezeigt werden.

In Ihrem Fall .smallbox-paysummarywird nach .smallboxdaher die 10px Priorität definiert.

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

Inline-CSS (HTML-Stilattribut) überschreibt CSS-Regeln in Stil-Tags und CSS-Dateien

Ein spezifischerer Selektor hat Vorrang vor einem weniger spezifischen.

Regeln, die später im Code erscheinen, überschreiben frühere Regeln, wenn beide dieselbe Spezifität haben.

Es ist auch wichtig zu beachten, dass der Browser den Stilen, die zuletzt in das DOM geschrieben wurden, Vorrang einräumt, wenn Sie zwei Stile in einem HTML-Element mit gleicher Priorität haben. Wenn also im DOM:

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... die Breite des Div beträgt 50px