Heim > Artikel > Web-Frontend > 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?
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
|
|
][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!