Lassen Sie sagen, dass ich eine globale css-Datei haben, global.css:Wie kann ich CSS-Eigenschaft überschreiben?
.my-class {
background-color:red;
}
Und ich brauche eine bestimmte css Datei, specific.css, nur für eine bestimmte html Datei. Und diese html Datei hat auch class mit dem Namen my-class. In dieser Zeit möchte ich jedoch die Hintergrundfarbe von html als blau markieren. Wie kann ich das in specific.css Datei tun?
Es gibt mehrere Möglichkeiten, dies zu tun.
Option # 1 ist, um sicherzustellen, dass Ihre specific.css Datei nach Ihrer globalen Datei enthalten ist. Dadurch werden die Stile überschrieben.
Zum Beispiel:
<link href="global.css" rel="stylesheet" type="text/css" />
<link href="specific.css" rel="stylesheet" type="text/css" />
Option # 2 ist CSS Spezifität zu nutzen.
Sehen Sie hier für weitere Informationen dazu: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Option # 3 ist !important in Ihrem Stil, die Sie vorrangig nachgegangen verwenden möchten.
Dies ist nicht sehr zu empfehlen, wird aber funktionieren, wenn die beiden oben genannten Optionen Sie nicht bekommen, was Sie brauchen.
Funktioniert das auch, wenn das Komponenten von Bootstraps sind? Ich meine, 'global.css' definiert' css' für eine bestimmte Bootstrap-Komponente und 'specific.css' definiert auch CSS dieser Komponente. – user3595632
Ja funktioniert unabhängig, nur müssen die gleichen benannt werden (oder noch spezifischer (wie in # 2 erwähnt)) als die Bootstraps und geladen nach dem Bootstraps CSS. –
Wenn Sie das andere Element des background-color in einer CSS-Datei definiert werden, die nach dem global.css (z Last specific.css nach global.css in Ihrem HTML-Markup) geladen wurden. Sie können auch das Tag !important verwenden, um ALLE anderen definierten Stile zu überschreiben, aber normalerweise werden Sie dies nicht benötigen. Es nennt sich Cascading Stylesheets aus einem Grund.
Hinzufügen '.my-class { Hintergrundfarbe: blau! Wichtig; } 'in Ihrer spezifischen.css Datei –