Verwandtschaftsselektoren bei LESS-Verschachtelung
Lassen Sie uns betrachten, wie man in LESS bei Verschachtelung verschiedene Selektoren hinzufügt, die Elemente nach Verwandtschaft auswählen. Sehen Sie sich die Beispiele an.
Beispiel
Untergeordneter Selektor (Child Selector):
div {
> p {
color: red;
}
}
Kompilierungsergebnis:
div > p {
}
Beispiel
Angrenzender Geschwisterselektor (Adjacent Sibling Selector)
div {
+ p {
color: red;
}
}
Kompilierungsergebnis:
div + p {
}
Beispiel
Allgemeiner Geschwisterselektor (General Sibling Selector):
div {
~ p {
color: red;
}
}
Kompilierungsergebnis:
div ~ p {
}
Praktische Aufgaben
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:
ul {
color: red;
> li {
padding: 20px;
}
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:
div {
ul {
> li {
padding: 20px;
}
}
}
