Artikelverzeichnis
1 Frage
- Sie haben lange Zeit den Front-End-Code geschrieben, CSS angepasst und schließlich vom Front-End rücksichtslos gestürzt und neu geschrieben. Am Ende können sie immer noch nicht verstehen, was sie geschrieben haben
2 CSS-Grundbearbeitung
- Jede Klasse ist gültig
.classA,.classB{
}
<div class="classA"></div>
<div class="classB"></div>
- Es ist nur gültig, wenn Sie zwei Kurse gleichzeitig haben
.classA.classB{
}
<div class="classA classB"></div>
- Alle als classB deklarierten Elemente innerhalb des classA-Elements sind gültig (durch Leerzeichen getrennt).
.classA .classB{
}
<div class="classA">
<div class="classB"></div>
<div>
<div class="classB"></div>
</div>
</div>
- Die erste Ebene innerhalb von KlasseA erklärt, dass alle Elemente von KlasseB gültig sind
.classA > .classB {
}
<div class="classA">
<div class="classB">有效</div>
<div>
<div class="classB">无效</div>
</div>
<div class="classB">有效</div>
</div>
- Entsprechende Etikettengruppe
/*所有<div>,<p>都生效*/
div,p{
}
/*<div>内部的所有<p>都生效*/
div p{
}
/*<div>内部第一层<p>生效*/
div > p{
}
3 Mischung aus Klasse und Label
- Grundmischung
/*声明了classA的所有<div>*/
div.classA {
}
/*声明了classA的元素，内部的所有<div>有效*/
.classA div{
}
- Kommas, Leerzeichen und Kleiner-als-Zeichen (<) haben die gleiche Bedeutung, unabhängig davon, ob es sich auf beiden Seiten um Klassen- oder HTML-Elemente handelt
4 Vorsichtsmaßnahmen
- Bei Klassen mit derselben Wirkung hängt die Priorität von der Ladereihenfolge der CSS-Dateien ab, nicht von der Deklarationsreihenfolge im Element class=""
.classB{
color:red;
}
.classA{
color:green;
}
<div class="classA classB">文字是绿色</div>
5 Zwei Tipps, um das Überschreiben von CSS zu verhindern
Derzeit ist es schwierig, den Stil vieler Front-End-Komponenten-Frameworks zu ändern, insbesondere wenn die am Ende geladene CSS-Datei dazu führt, dass das benutzerdefinierte CSS überschrieben wird. Im Allgemeinen gibt es zwei Situationen
Das Zielelement kann eine Klasse hinzufügen
- Element fügt benutzerdefinierte Klasse B hinzu
- Kopieren Sie die tatsächliche effektive KlasseA
- Fügen Sie die tatsächliche effektive Klasse A in die CSS-Datei ein und fügen Sie dann die benutzerdefinierte Klasse B hinzu, sodass Ihre Priorität extrem hoch ist, auch wenn Klasse A am Ende geladen wird
.classA.classB{
}
<div class="classB">框架自动会加上classA</div>
Das Zielelement kann keine Klasse hinzufügen
In diesem Fall generiert die Framework-Komponente automatisch mehrschichtige Elemente und die benutzerdefinierte Klasse kann nicht hinzugefügt werden.
Idee: Ausgehend vom übergeordneten Element muss das oberste Element in der Lage sein, eine benutzerdefinierte Klasse hinzuzufügen. Wenn dies nicht möglich ist, die große Der Deal besteht darin, eine div-Ebene direkt festzulegen und dann die hierarchische Beziehung zu verwenden, um den Zweck der Festlegung zu erreichen
- Das übergeordnete Div deklariert KlasseA
- Direkt nach Level einstellbar
.classA div>p>span{
color:purple;
}
.classC{
color:red;
}
<div class="classA">
<div>
<p><span class="classC">我是紫色，默认的红色无效</span></p>
</div>
</div>
Hinweis: nth-child(num) kann die Anzahl der untergeordneten Elemente angeben
6 Regeln zum Schreiben weniger Dateien
- Die endgültig generierte CSS-Datei wird durch {} getrennt und durch Leerzeichen verbunden
.classA{
div{
}
}
/*等效于*/
.classA div{
}
- &:n-tes Kind von weniger
.classA {
div {
&:nth-child(1){
}
}
}
/*等效于*/
.classA div:nth-child(1){
}