Was bedeutet CSS-Selektor?

In CSS ist der Selektor ein Modus zum Auswählen von Elementen, die gestylt werden müssen; der CSS-Selektor gibt das Objekt des CSS-Stils an, d. h., auf welche Elemente auf der Webseite der „Stil“ wirkt, das Syntaxformat „selector {style}“ . Elemente in HTML-Seiten werden über CSS-Selektoren gesteuert.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS ist ein Selektor ein Modus zum Auswählen von Elementen, die gestaltet werden müssen.

Um mit CSS eine Eins-zu-Eins-, Eins-zu-Viele- oder Viele-zu-Eins-Steuerung von Elementen in HTML-Seiten zu erreichen, müssen Sie CSS-Selektoren verwenden. Elemente in HTML-Seiten werden über CSS-Selektoren gesteuert.

Jede CSS-Stildefinition besteht aus zwei Teilen, die Form ist wie folgt: [Code] Selektor {Stil} [/code] Der Teil vor {} ist der „Selektor“. Der „Selektor“ gibt das Objekt des „Stils“ in {} an, d. h., auf welche Elemente auf der Webseite der „Stil“ wirkt.

Welche Selektoren gibt es in CSS?

elementelement1[attribute[attribute[attribute[attribute[attribute[attribute[attribute:aktiv::after::before:checked:default:disabled:empty:aktiviert:first-child::first-letter::first-line:first-of-type:focus:fullscreen:hover:in-range:indeterminate:invalid:lang(Sprache

Selector	Beispiel	Beispielbeschreibung
.class	.intro	Wählen Sie alle Elemente mit class="intro" aus.
.class1.class2	.name1.name2	Wählen Sie alle Elemente aus, die sowohl name1 als auch name2 im Klassenattribut haben.
.class1 .class2	.name1 .name2	Wählt alle Klassennamen-Name2-Elemente aus, die Nachkommen von Klassennamen-Name1-Elementen sind.
#id	#firstname	Wählen Sie das Element mit id="firstname" aus.
*	*	Alle Elemente auswählen.
element	p	Alle -Elemente auswählen.
element.class	p.intro	wählt alle -Elemente mit class="intro" aus.
element,element	div, p	wählt alle -Elemente aus.
element element	div p	Wählt alle -Elemente innerhalb eines -Elements aus.
element>element	div > Wählt alle -Elemente aus, deren übergeordnetes Element ist.
+elementdiv + p	Wählt das erste -Element aus, das unmittelbar auf das -Element folgt.
~element2p ~ ul	Wählt jedes -Element aus.
][target]	Wählt alle Elemente mit dem Zielattribut aus.
=value][target=_blank]	Wählt alle Elemente mit dem Attribut target="_blank" aus.
~=value][title~=flower]	Wählen Sie alle Elemente aus, deren Titelattribut das Wort „Blume“ enthält.
|=value][lang|=en]	Wählt alle Elemente aus, deren lang-Attributwert mit „en“ beginnt.
^=value]a[href^="https"]	Wählt jedes -Element aus, dessen src-Attributwert mit „https“ beginnt.
$=value]a[href$=".pdf"]	Wählt alle -Elemente aus, deren src-Attribut mit „.pdf“ endet.
*=value]a[href*="w3schools"]	Wählt jedes -Element aus, dessen href-Attributwert die Teilzeichenfolge „abc“ enthält.
a:aktiv	Wählen Sie den aktiven Link aus.
p::after	Fügen Sie nach jedem
p::before	Fügen Sie den Inhalt vor dem Inhalt jedes ein.
input:checked	Wählt jedes ausgewählte
input:default	Wählt das Standardelement
input:disabled	wählt jedes deaktivierte
p:empty	Wählt jedes -Element aus (einschließlich Textknoten), das keine untergeordneten Elemente hat.
Eingabe:aktiviert	Wählt jedes aktivierte
p:first-child	Wählt jedes -Element aus, das das erste untergeordnete Element des übergeordneten Elements ist.
p::first-letter	Wählt den ersten Buchstaben jedes -Elements aus.
p::first-line	Wählt die erste Zeile jedes -Elements aus.
p:first-of-type	Wählt jedes -Element aus, das das erste -Element ist.
input:focus	Wählen Sie das Eingabeelement aus, das den Fokus erhält.
:fullscreen	Wählt ein Element aus, das sich im Vollbildmodus befindet.
a:hover	Wählen Sie den Link aus, auf dem sich der Mauszeiger befindet.
input:in-range	Wählt Eingabeelemente aus, deren Werte innerhalb des angegebenen Bereichs liegen.
input:indeterminate	wählt Eingabeelemente aus, die sich in einem unbestimmten Zustand befinden.
input:invalid	Wählt alle Eingabeelemente mit ungültigen Werten aus.
)p:lang(it)	Wählt jedes -Element aus, dessen lang-Attribut gleich „it“ (Italienisch) ist.
:last-child	p:last-child	Wählt jedes -Element aus, das das letzte untergeordnete Element ist, das zu seinem übergeordneten Element gehört.
:last-of-type	p:last-of-type	Wählt jedes -Element aus, das das letzte -Element ist.
:link	a:link	Wählen Sie alle nicht besuchten Links aus.
:not(selector)	:not(p)	wählt jedes Element aus, das kein -Element ist.
:nth-child(n)	p:nth-child(2)	Wählt jedes -Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist.
:nth-last-child(n)	p:nth-last-child(2)	Gleiches wie oben, gezählt ab dem letzten untergeordneten Element.
:nth-of-type(n)	p:nth-of-type(2)	Wählt jedes -Element aus, das das zweite -Element ist.
:nth-last-of-type(n)	p:nth-last-of-type(2)	Wie oben, aber beginnen Sie mit der Zählung ab dem letzten untergeordneten Element.
:only-of-type	p:only-of-type	Wählt jedes -Element aus, das das einzige -Element ist.
:only-child	p:only-child	Wählt jedes -Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist.
:optional	Eingabe:optional	Wählen Sie Eingabeelemente ohne das Attribut „erforderlich“ aus.
:out-of-range	input:out-of-range	Wählen Sie Eingabeelemente aus, deren Werte außerhalb des angegebenen Bereichs liegen.
::placeholder	input::placeholder	Wählt das Eingabeelement aus, für das das Attribut „Platzhalter“ angegeben ist.
:read-only	input:read-only	Wählt Eingabeelemente aus, für die das Attribut „readonly“ angegeben ist.
:read-write	input:read-write	Wählt Eingabeelemente aus, die nicht das Attribut „readonly“ angeben.
:required	input:required	Wählt Eingabeelemente aus, für die das Attribut „erforderlich“ angegeben ist.
:root	:root	Wählt das Stammelement des Dokuments aus.
::selection	::selection	Wählt den Teil des Elements aus, den der Benutzer ausgewählt hat.
:target	#news:target	Wählt das aktuell aktive #news-Element aus.
:valid	input:valid	Wählt alle Eingabeelemente mit gültigen Werten aus.
:visited	a:visited	Wählen Sie alle besuchten Links aus.

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas bedeutet CSS-Selektor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!