Comment cibler des plages spécifiques d'éléments nième enfant avec des sélecteurs CSS ?

Sélecteur CSS pour les groupes de nièmes éléments

Le sélecteur CSS donné, `.myTableRow td:nth-child(?){
background-color: #FFFFCC;
}, vous permet de cibler et de définir un style spécifique pour le nième enfant éléments dans l’élément .myTableRow. Cependant, vous devez le modifier pour cibler les colonnes ` de 2 à 4.

Solution :

Pour y parvenir, vous pouvez utiliser le CSS suivant selector :

.myTableRow td:nth-child(n+2):nth-child(-n+4){
  background-color: #FFFFCC;
}

Ce sélecteur utilise le sélecteur :nth-child() avec la syntaxe suivante :

• :nth-child(n X) : sélectionne tous les éléments enfants de à partir de la Xème position.
• :nth-child(-n x) : sélectionne tous les éléments enfants jusqu'à la Xème position.

En combinant ces deux sélecteurs, vous pouvez cibler les éléments dans une plage spécifique.

Exemple :

Dans la structure HTML fournie :

<table>
  <tr class="myTableRow">
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
  </tr>
</table>

Application du sélecteur CSS modifié, `.myTableRow td : nth-child(n 2):nth-child(-n 4){
background-color: #FFFFCC;
}, définira la couleur d'arrière-plan des colonnes ` 2, 3 et 4 à #FFFFCC.

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!