Heim  >  Artikel  >  Web-Frontend  >  Was bedeutet CSS-Selektor?

Was bedeutet CSS-Selektor?

青灯夜游
青灯夜游Original
2021-05-14 14:19:334494Durchsuche

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.

Was bedeutet CSS-Selektor?

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!

Stellungnahme:
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