Einführung in neue CSS-Selektoren und Pseudoklassen in HTML5_html5-Tutorial-Fähigkeiten

Selector
p[name^="my"]{font-size:14px}
Selector^= wendet die Regel auf alle

-Element-Tags an, deren Namensattribut mit „my“ p[ beginnt; name$="my"]{font-size:14px}
Selector$= wendet die Regel auf alle

Element-Tags an, deren Namensattribut mit „my“ endet
p[name*= „my“ ]{font-size:14px}
Selector$= wendet die Regel auf alle

-Elemente an, deren Namensattribut „my“ am Ende enthält.
Selector> , ,~
Selector > gibt an, dass die Das betroffene Element ist ein untergeordnetes Element des ersten Elements.
Selektor Dieser Selektor bezieht sich auf das Element, das unmittelbar auf das Element folgt. Die beiden Elemente müssen dasselbe übergeordnete Element haben.
Selector~ ähnelt , aber das betroffene Element folgt nicht unbedingt dem ersten Element.

Fügen Sie „:“ zwischen dem Namen der Pseudoklasse und dem referenzierten Element hinzu
Beispiel: myclass:nth-child(2)
Das zweite Element im myclass-Element
Schlüsselwort „ odd " , "even"
myclass:nth-child(odd): wirkt sich auf das
aus, dessen übergeordnete Elementindexposition eine ungerade Zahl ist.
myclass:nth-child(even): wirkt sich auf das
aus, dessen übergeordnetes Element ist Elementindexposition ist eine gerade Zahl

Code kopieren

Der Code lautet wie folgt:

.test:nth- child(odd)
{
color:Blue; ;
}
. test:nth-child(2)
{
color: Grün
}

1

2

1

🎜>

1

🎜>

Wirkung wie folgt:
1
2
1
2
1
2
Negative Pseudoklasse
:not(p ){color:red}
außer< Alle Elemente außer dem ;p>-Element sind rot