Utilisez le sélecteur de pseudo-classe :nth-of-type(2) pour sélectionner le style du deuxième élément du même type-tutoriel CSS-php.cn

Utilisez le sélecteur de pseudo-classe :nth-of-type(2) pour sélectionner le style du deuxième élément du même type

WBOY

Libérer： 2023-11-20 12:56:15

original

810 Les gens l'ont consulté

Utilisez le sélecteur de pseudo-classe :nth-of-type(2) pour sélectionner le style du deuxième élément du même type

Titre : utilisez le sélecteur de pseudo-classe :nth-of-type(2) pour sélectionner le style du deuxième élément du même type

Dans le développement Web, nous devons souvent ajouter des styles à des éléments spécifiques. Parfois, nous devons sélectionner un élément spécifique parmi le même type d’éléments pour ajouter des styles, plutôt que tous les mêmes types d’éléments. Dans ce cas, vous pouvez utiliser le sélecteur de pseudo-classe en CSS : nth-of-type(2) pour sélectionner le deuxième élément du même type et lui ajouter un effet de style.

Le sélecteur de pseudo-classe est un sélecteur CSS spécial utilisé pour sélectionner des éléments qui répondent à des conditions spécifiques. Parmi eux, le sélecteur de pseudo-classe :nth-of-type(2) consiste à sélectionner le deuxième élément parmi les éléments du même type. Il est utilisé comme suit :

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

Copier après la connexion

Ce qui suit est un exemple de code spécifique pour montrer comment utiliser le sélecteur de pseudo-classe :nth-of-type(2) pour sélectionner le deuxième élément du même type d'élément :

<!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>

Copier après la connexion

Ci-dessus Dans l'exemple de code, nous sélectionnons le deuxième élément li dans l'élément ul du même type via le sélecteur ul li:nth-of-type(2) et définissons sa couleur d'arrière-plan sur jaune. De cette façon, le deuxième élément du même type aura un style différent des autres éléments.

Il convient de noter que :nth-of-type(2) est un nouvel attribut de CSS3, il doit donc être compatible avec différents navigateurs lors de son utilisation. La compatibilité peut être obtenue en ajoutant le préfixe du fournisseur de navigateur correspondant.

En résumé, l'utilisation du sélecteur de pseudo-classe :nth-of-type(2) permet de sélectionner le deuxième élément du même type et de lui ajouter des styles. Cette fonctionnalité est très utile dans le développement Web, car elle nous permet de contrôler plus précisément le style des éléments de la page. Vous pouvez utiliser cette fonctionnalité de manière flexible pour obtenir divers effets de style en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!