Verwenden Sie den Pseudoklassenselektor :nth-of-type(2), um den Stil des zweiten Elements desselben Typs auszuwählen-CSS-Tutorial-php.cn

Verwenden Sie den Pseudoklassenselektor :nth-of-type(2), um den Stil des zweiten Elements desselben Typs auszuwählen

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2023-11-20 12:56:15

Original

894 Leute haben es durchsucht

Verwenden Sie den Pseudoklassenselektor :nth-of-type(2), um den Stil des zweiten Elements desselben Typs auszuwählen

Titel: Verwenden Sie den Pseudoklassenselektor :nth-of-type(2), um den Stil des zweiten Elements desselben Typs auszuwählen.

In der Webentwicklung müssen wir häufig Stile zu bestimmten Elementen hinzufügen. Manchmal müssen wir zum Hinzufügen von Stilen ein bestimmtes Element desselben Elementtyps auswählen und nicht alle Elemente desselben Typs. In diesem Fall können Sie den Pseudoklassenselektor in CSS verwenden: nth-of-type(2), um das zweite Element desselben Typs auszuwählen und ihm einen Stileffekt hinzuzufügen.

Pseudoklassenselektor ist ein spezieller CSS-Selektor, der zur Auswahl von Elementen verwendet wird, die bestimmte Bedingungen erfüllen. Unter diesen bedeutet der Pseudoklassenselektor :nth-of-type(2) die Auswahl des zweiten Elements unter Elementen desselben Typs. Es wird wie folgt verwendet:

/* 选择同类型元素中的第二个元素 */
选择器:nth-of-type(2) {
    属性: 值;
}

Nach dem Login kopieren

Hier ist ein spezifisches Codebeispiel, das zeigt, wie der Pseudoklassenselektor :nth-of-type(2) verwendet wird, um das zweite Element desselben Elementtyps auszuwählen:

<!DOCTYPE html>
<html>
<head>
    <style>
    /* 选择同类型元素中的第二个元素 */
    ul li:nth-of-type(2) {
        background-color: yellow;
    }
    </style>
</head>
<body>
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li> <!-- 这里将被选中，因为是同类型元素中的第二个元素 -->
        <li>第三个元素</li>
    </ul>
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li> <!-- 这里不会被选中，因为是同类型元素中的第一个元素 -->
    </ul>
</body>
</html>

Nach dem Login kopieren

Oben Im Codebeispiel wählen wir das zweite li-Element im Element ul desselben Typs über den Selektor ul li:nth-of-type(2) aus und setzen seine Hintergrundfarbe auf Gelb. Auf diese Weise hat das zweite Element desselben Typs einen anderen Stil als die anderen Elemente.

Es ist erwähnenswert, dass :nth-of-type(2) ein neues Attribut von CSS3 ist und daher bei der Verwendung mit verschiedenen Browsern kompatibel sein muss. Kompatibilität kann durch Hinzufügen des entsprechenden Browser-Herstellerpräfixes erreicht werden.

Zusammenfassend lässt sich sagen, dass die Verwendung des Pseudoklassenselektors :nth-of-type(2) das zweite Element desselben Typs auswählen und ihm Stile hinzufügen kann. Diese Funktion ist bei der Webentwicklung sehr nützlich, da sie uns ermöglicht, den Stil der Elemente auf der Seite genauer zu steuern. Sie können diese Funktion flexibel nutzen, um je nach tatsächlichem Bedarf verschiedene Stileffekte zu erzielen.

Das obige ist der detaillierte Inhalt vonVerwenden Sie den Pseudoklassenselektor :nth-of-type(2), um den Stil des zweiten Elements desselben Typs auszuwählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!