Teilen von Beispielen für die Überschreibungsreihenfolge von CSS-Stilen in Stylesheets

Manchmal funktionieren beim Schreiben von CSS bestimmte Einschränkungen immer nicht, was das Problem der Überschreibung des CSS-Stils mit sich bringt, wie folgt

CSS-Code

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
    border: solid 2 #EEE;  
}  

.current_block {  
    border: solid 2 #AE0;  
}

In einigen Lehrbüchern (w3schools usw.) heißt es nur, dass die Reihenfolge von CSS „Stil auf dem Element“ > „Stilelement im Dateikopf“ ist. externe Stildatei“, es gibt jedoch keine detaillierte Erklärung, wie die Prioritäten mehrerer identischer Stile in der Stildatei angeordnet sind. Nach dem Testen und der weiteren Suche habe ich erfahren, dass die Prioritäten wie folgt angeordnet sind:

1. Je präziser die Elementauswahl des Stylesheets, desto höher ist die Priorität des Stils :

Stil angegeben durch ID-Selektor> Stil angegeben durch Elementtyp-Selektor

Im obigen Beispiel ist die Stilpriorität von #navigator größer als die Priorität von . current_block, mit der Zeit ist .current_block die neueste Ergänzung und funktioniert auch nicht.

2. Für Stile, die durch denselben Selektortyp angegeben werden, ist die Priorität umso höher, je später in der Stylesheet-Datei.

Hinweis: Hier ist die Stylesheet-Datei Je später im Element, desto höher ist die Priorität und nicht die Reihenfolge, in der die Elementklasse erscheint. Beispielsweise erscheint .class2 nach .class1 im Stylesheet:

Css-Code

.class1 {  
    color: black;  
}  

.class2 {  
    color: red;  
}

Wenn ein Element eine Klasse angibt, verwenden Sie class="class2 class1 " Auf diese Weise angegeben, obwohl Klasse1 bei der Angabe im Element hinter Klasse2 steht, hat Klasse2 immer noch eine höhere Priorität, da Klasse1 in der Stylesheet-Datei vor Klasse2 steht. Das Attribut der Farbe ist rot und nicht schwarz.

3. Wenn Sie möchten, dass die Priorität eines bestimmten Stils höher ist, können Sie mit !important Folgendes angeben:

CSS-Code

.class1 {  
    color: black !important;  
}  

.class2 {  
    color: red;  
}

Zu diesem Zeitpunkt wird die Klasse Schwarz anstelle von Rot verwenden.

Es gibt zwei Lösungen für die zu Beginn aufgetretenen Probleme:

1. 将border从#navigator中拿出来，放到一个class .block中，而.block放到.current_block之前：

Css代码  

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
}  

.block {  
    border: solid 2 #EEE;  
}  

.current_block {  
    border: solid 2 #AE0;  
}

 需要莫仁为#navigator元素指定class="block"

 

2. 使用!important:

 Css代码  

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
    border: solid 2 #EEE;  
}  

.current_block {  
    border: solid 2 #AE0 !important;  
}

Das obige ist der detaillierte Inhalt vonTeilen von Beispielen für die Überschreibungsreihenfolge von CSS-Stilen in Stylesheets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!