CSS Pseudo-Klassen (Pseudoklassen )

CSS-Pseudoklassen-Selektoren passen Komponenten an anderen Bedingungen an, nicht unbedingt durch den Dokumentbaum definiert. CSS-Pseudoklassen sind Schlüsselwörter, die zu Selektoren hinzugefügt werden, um den speziellen Zustand der auszuwählenden Elemente zu spezifizieren. Zum Beispiel kann :hover verwendet werden, um die Farbe eines Buttons zu ändern, wenn der Benutzer die Maus darauf legt.

Was ist ein Pseudoklasse

CSS-Pseudoklassen erlauben es Ihnen, die Stilelemente dynamischer Zustände zu setzen, z.B. Mausüberlagerung, Aktivzustand und Fokuszustand, sowie Elemente im Dokumentbaum, die nicht durch andere Selektoren als Ziel erreicht werden können, ohne ihre ID oder Klasse hinzuzufügen, z.B. für den ersten oder letzten Kindknoten.

Pseudo-classes start with a colon (:). Their syntax can be given as follows:

The following section describes the most commonly used pseudo-classes.

anchor pseudo-classes

UsingAnchorPseudo-class links can be displayed in different ways:

These pseudo-classes allow you to style unvisited links and visited links. The most common styling technique is to remove the underline from visited links.

a:link {
　　　　color: blue;
}
a:visited {
　　　　text-decoration: none;
}

Some anchor pseudo-classes are dynamic-They are applied due to user interaction with the document (such as hover or focus, etc.).

a:hover {
　　　　color: red;
}
a:active {
　　　　color: gray;
}
a:focus {
　　　　color: none;
}

These pseudo-classes change the way links respond to user actions.

• :hover Applies when the user places the cursor on an element but does not select it.

• :active Applies when an element is activated or clicked.

• :focus Applies when an element has keyboard focus.

:first-child Pseudo-Klasse

:first-The pseudo-class child matches the element that is the first child of some other elements. ol li:first-In the following example, the selector selects the first list item of an ordered list and removes the border from the top of it.

ol li:first-child {
　　　　border-top: none;
}

:last-pseudo pseudo-class

:last-The pseudo-class child matches the element that is the last child of some other elements. Below ul li:last-The selector in the child example selects the last list item from the unordered list and removes the right border from it.

ul li:last-child {
　　　　border-right: none;
}

：nth-child Pseudo-Klasse

CSS3hat eine neue :nth-child Pseudo-Klasse ermöglicht es Ihnen, eine oder mehrere spezifische Unterobjekte eines bestimmten Elternelements als Ziel zu verwenden. Die Grundgrammatik dieser Auswahl kann mit der von :nth-child(N)，wobei N ein Parameter ist, der eine Zahl, ein Schlüsselwort (even oder odd) oder eine Formulierung wie xn sein kann+y，wobei x und y ganze Zahlen sind (z.B.1n，2n，2n+1，...）。

table　tr:nth-child(2n)　td　{
　　　　background:　#eee;
}

Die Styleregeln im obigen Beispiel betonen nur die Ersatzzeilen, ohne dem Element eine ID oder Klasse hinzuzufügen.

：nth

：lang-Pseudo-KlasseSprach-Pseudo-Klasse:lang ermöglicht die Konstruktion von Selectoren basierend auf der Sprache eines bestimmten Markers. :lang-Pseudo-Klasse im folgenden Beispiel

Für die explizite Zuweisung eines Sprachwerts an Elemente wurden Anführungszeichen no definiert.
　　　　q:lang(no)　{
}
/*　HTML　code　snippet　*/Einige Text A Ein Zitat in einem Absatz Einige Text. quotes: "~" "~";

Pseudo-Klassen und CSS-Klassen

Pseudo-Klassen können mit CSS-Klassen kombiniert werden.

class="red" im folgenden Beispiel wird der Link rot dargestellt.

a.red:link　{　　　　/*　style　Regel　*/
　　　　color:　#ff0000;
}
<a　class="red"　href="#">Klicken Sie mich</a>　　　　/*　HTML　code　snippet　*/