So verwenden Sie CSS-Pseudoklassen

Wie verwende ich CSS-Pseudoklassen?

CSS-Pseudoklassen werden verwendet, um Selektoren einige Spezialeffekte hinzuzufügen.

Pseudoklassensyntax:

selector:pseudo-class {property:value;}

CSS-Klassen können auch Pseudoklassen verwenden:

selector.class:pseudo-class {property:value;}

Ankerpseudoklasse

In Browsern, die CSS unterstützen, können verschiedene Zustände des Links auf unterschiedliche Weise angezeigt werden

Instanz

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

Hinweis: In der CSS-Definition muss ein:hover gesetzt werden. Dies ist nur der Fall gültig nach a:link und a:visited.

Hinweis: In der CSS-Definition muss a:active nach a:hover platziert werden, um gültig zu sein.

Hinweis: Bei Pseudoklassennamen wird die Groß-/Kleinschreibung nicht beachtet.

Pseudoklassen und CSS-Klassen

Pseudoklassen können in Verbindung mit CSS-Klassen verwendet werden:

a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

Wenn der Link im obigen Beispiel wurde besucht, es wird rot angezeigt.

CSS :first-child pseudo-class

Sie können die :first-child pseudo-class verwenden, um das erste untergeordnete Element eines übergeordneten Elements auszuwählen.

Hinweis: In früheren Versionen von IE8 muss deklariert werden, damit :first-child wirksam werden kann.

Entspricht dem ersten

-Element

Im folgenden Beispiel entspricht der Selektor dem

-Element, das das erste untergeordnete Element eines Elements ist:

Beispiel

p:first-child
{
    color:blue;
}

Entspricht allen

-Elementen, die mit dem ersten -Element übereinstimmen.

Im folgenden Beispiel werden alle

-Elemente ausgewählt, die mit dem ersten -Element übereinstimmen ;-Element des Elements:

instanz

p > i:first-child
{
    color:blue;
}

entspricht allen -Elementen

p:first-child i
{
    color:blue;
}

q:lang(no) {quotes: "~" "~";}