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 1a309583e26acea4f04ca31122d8c535 deklariert werden, damit :first-child wirksam werden kann.

Entspricht dem ersten e388a4556c0f65e1904146cc1a846bee-Element

Im folgenden Beispiel entspricht der Selektor dem e388a4556c0f65e1904146cc1a846bee-Element, das das erste untergeordnete Element eines Elements ist:

Beispiel

p:first-child
{
    color:blue;
}

Entspricht allen e388a4556c0f65e1904146cc1a846bee-Elementen, die mit dem ersten 5a8028ccc7a7e27417bff9f05adf5932-Element übereinstimmen.

Im folgenden Beispiel werden alle e388a4556c0f65e1904146cc1a846bee-Elemente ausgewählt, die mit dem ersten 5a8028ccc7a7e27417bff9f05adf5932-Element übereinstimmen ;-Element des Elements:

instanz

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

entspricht allen 5a8028ccc7a7e27417bff9f05adf5932-Elementen

innerhalb aller e388a4556c0f65e1904146cc1a846bee-Elemente >

Im folgenden Beispiel , der Selektor stimmt mit allen 5a8028ccc7a7e27417bff9f05adf5932-Elementen in jedem e388a4556c0f65e1904146cc1a846bee-Element überein, das das erste untergeordnete Element dieses Elements ist:

Instanz

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

CSS - :lang Pseudoklasse

:lang pseudo-class gibt Ihnen die Möglichkeit, spezielle Regeln für verschiedene Sprachen zu definieren

Hinweis: IE8 muss deklarieren < ;!DOCTYPE> kann das ;lang pseudo unterstützen -Klasse.

Im folgenden Beispiel definiert die Klasse :lang den Typ der Anführungszeichen für das q-Element mit dem Attributwert Nr.:

Instanz

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS-Pseudoklassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!