So wenden Sie die CSS-Klasse an, ohne das globale Behavior zu beeinflussen

Question

Ich verwende eine Drittanbieterbibliothek, die eine eigene CSS-Klasse besitzt. Dies ist, wie die DOM aussieht:

<div id="toast-container" class="toast-custom" aria-live="polite" role="alert"> 
     <div class="toast toast-info" style="display: block;"> .... 

Dies ist die Klasse ich überschreiben die Breite

.toast-custom { 
    top: 0; 
    left: 30%; 
    width: 50%; 
} 

Dies ist die Klasse bereits zur Verfügung gestellt von Rahmen

#toast-container > div { 
    position: relative; 
    pointer-events: auto; 
    overflow: hidden; 
    margin: 0 0 6px; 
    padding: 15px 15px 15px 50px; 
    width: 46%; 
    -moz-border-radius: 3px 3px 3px 3px; 
    -webkit-border-radius: 3px 3px 3px 3px; 
    border-radius: 3px 3px 3px 3px; 
    background-position: 15px center; 
    background-repeat: no-repeat; 
    -moz-box-shadow: 0 0 12px #999999; 
    -webkit-box-shadow: 0 0 12px #999999; 
    box-shadow: 0 0 12px #999999; 
    color: #ffffff; 
    opacity: 0.8; 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
    filter: alpha(opacity=80); 
} 

zu beheben

Ich bin nicht in der Lage, die Breite des Dix zu ändern, ohne #toast-container > div zu berühren, aber wenn ich mache Wechsel zu #toast-container > div wird es eine globale Auswirkung haben. Wie kann ich .toast-custom verwenden, um die erforderliche Änderung vorzunehmen?

Answer 1

Das Problem, das Sie haben, ist, dass ein # „ID-Selektor“ (zB. #my-rule) spezifischer als eine . „Klassenauswahl“ ist (zB. .my-rule) und der [letzte] spezifischsten CSS-Selektor (Regel) gewinnt.

Dies sollte auf jeden #toast-containers arbeiten, implementiert .toast-custom:

/* Note "no space" between */ 
#toast-container.toast-custom > div { 
    ... 
} 

Diese ist im Grunde sagen „wählen Sie den direkten Nachkommen div von #toast-containers Elementen, die auch haben eine .toast-custom Klasse angewandt.“ Da dies spezifischer als die Regel des Frameworks ist, wird Ihre Regel überschrieben, aber nur in diesem Fall. - (. #toast-containers dass do nicht implementieren .toast-custom sollten nicht betroffen sein)

Von MDN

Spezifität ist das Mittel, mit welchen Browsern sind die CSS-Eigenschaft Werte entscheiden, die am besten zu einem Element und wird daher angewendet werden.

Weitere Informationen finden Sie unter CSS Specificity auf MDN.