Kommentar: HTML5 hat einen neuen CSS-Selektor und eine Pseudo-Kategorie hinzugefügt. Dieser Artikel hat einige zusammengestellt und eine einfache Einführung zur Verwendung gegeben. Freunde, die HTML5 mögen, können sich darauf verweisen. Ich hoffe, es wird für alle hilfreich sein.
Wählerp [name^= my] {Schriftgröße: 14px}
Selector ^= Regeln werden auf alle <p> Element -Tags mit Namensattributen angewendet, beginnend mit meinem
p [Name $ = my] {Schriftgröße: 14px}
Selector $ = Regeln gelten für alle Namensattribute, die mit meinen <p> Element -Tags enden
P [Name*= My] {Schriftgröße: 14px}
Selector $ = Regeln werden auf alle Namensattribute angewendet, die die mit meinem enden enden <p> Elemente enthalten
Selector>, +, ~
Selector> bedeutet, dass das betroffene Element ein Kind des ersten Elements ist.
Selector + Dieser Selektor bezieht sich unmittelbar nach dem Element auf das Element, und diese beiden Elemente müssen das gleiche Elternteil haben.
Der Selektor ~ ähnelt +, aber das betroffene Element folgt nicht unbedingt dem ersten Element.
Fügen Sie den Namen der Pseudoklasse und das Referenzelement hinzu:
Beispiel: MyClass: N-te Kind (2)
Das zweite Element im Myclasselement
Schlüsselwort ungerade, sogar
MyClass: N-te Kind (ungerade): Beeinflusst die Indexposition seines übergeordneten Elements mit einer ungeraden Zahl
MyClass: N-te-Kind (sogar): Die Auswirkungen auf die Indexposition seines übergeordneten Elements ist gerade.
<Styles>
.Test: n-Kind (ungerade)
{
Farbe: Blau;
}
.Test: n-te Kind (sogar)
{
Farbe: Rot;
}
.Test: n-Kind (2)
{
Farbe: grün;
}
</style>
<div>
<p>
1
</p>
<p>
2
</p>
</div>
<p>
1
</p>
<p>
2
</p>
<p>
1
</p>
<p>
2
</p>
Die Effekte sind wie folgt:
1
2
1
2
1
2
Negieren Sie Pseudoklassen
: nicht (p) {Farbe: rot}
Alle anderen Elemente außer dem <p> Element sind rot