Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 15:49:08
Original
1948 Leute haben es durchsucht

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage