Implémenter plusieurs scénarios d'application du sélecteur de pseudo-classe CSS :nth-last-child(-n+4)

Pour implémenter divers scénarios d'application du sélecteur de pseudo-classe CSS :nth-last-child(-n+4), des exemples de code spécifiques sont nécessaires

Le sélecteur de pseudo-classe CSS nous offre de nombreuses façons pratiques de sélectionner des éléments. Chemin. Parmi eux, le sélecteur de pseudo-classe :nth-last-child(-n+4) est un sélecteur très utile, qui peut sélectionner l'avant-dernier enfant et tous les éléments qui le suivent. Ce type de sélecteur a de nombreux scénarios d'application en développement réel. Ci-dessous, je vais vous présenter plusieurs exemples de code spécifiques utilisant ce sélecteur de pseudo-classe.

1. Style de la barre de navigation

Dans la plupart des développements de sites Web, nous rencontrerons la conception de la barre de navigation. En utilisant le sélecteur de pseudo-classe :nth-last-child(-n+4), nous pouvons facilement sélectionner le 4ème élément et les éléments suivants de la barre de navigation et leur ajouter des styles spécifiques, comme les configurer pour qu'ils ne s'affichent pas Border pour obtenir. un effet spécial.

<style>
.nav-bar div:nth-last-child(-n+4) {
    border-bottom: none;
}
</style>

<div class="nav-bar">
    <div>首页</div>
    <div>新闻</div>
    <div>产品</div>
    <div>关于</div>
    <div>联系</div>
    <div>更多</div>
</div>

2. Style de liste

Dans une liste, nous devrons peut-être ajouter des styles spéciaux à l'avant-dernier élément et aux éléments suivants, par exemple en les marquant comme contenu important ou en les affichant dans différentes couleurs. En utilisant le sélecteur de pseudo-classe :nth-last-child(-n+4), nous pouvons facilement obtenir cet effet.

<style>
.list-item:nth-last-child(-n+4) {
    color: red;
    font-weight: bold;
}
</style>

<ul>
    <li class="list-item">第1条内容</li>
    <li class="list-item">第2条内容</li>
    <li class="list-item">第3条内容</li>
    <li class="list-item">第4条内容</li>
    <li class="list-item">第5条内容</li>
    <li class="list-item">第6条内容</li>
</ul>

3. Style de tableau

Dans le tableau, nous pouvons utiliser le sélecteur de pseudo-classe :nth-last-child(-n+4) pour sélectionner les cellules de la 4ème colonne à partir du bas et après, et ajouter des Style, tel que la couleur d’arrière-plan ou l’affichage en gras.

<style>
table td:nth-last-child(-n+4) {
    background-color: yellow;
    font-weight: bold;
}
</style>

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
</table>

Grâce à l'exemple de code ci-dessus, nous pouvons voir que le sélecteur de pseudo-classe nth-last-child(-n+4) a de nombreux scénarios d'application en développement réel. Cela nous donne plus de flexibilité dans la sélection des éléments et leur ajout de styles spécifiques. Espérons que ces exemples vous aideront à mieux appliquer les sélecteurs de pseudo-classe CSS.

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!