Maison >interface Web >tutoriel CSS >Comment puis-je sélectionner efficacement chaque nième élément en CSS ?
Comment puis-je sélectionner efficacement chaque nième élément en CSS ?
- Patricia Arquetteoriginal
- 2024-12-24 20:28:11654parcourir
Sélectionner chaque nième élément en CSS
Question :
Existe-t-il un moyen efficace de sélectionner chaque nième élément dans un ensemble d'éléments, sans lister chaque élément individuellement ?
Réponse :
Oui, en utilisant la pseudo-classe :nth-child() avec des expressions arithmétiques, vous pouvez sélectionner des éléments en fonction sur leur position dans la liste des enfants.
La syntaxe de :nth-child() permet diverses opérations arithmétiques, notamment :
- Addition ( )
- Soustraction (-)
- Multiplication du coefficient (an)
Pour sélectionner un élément sur quatre, par exemple, utilisez le sélecteur suivant :
:nth-child(4n)
Cette expression commence le décompte à 0, il sélectionnera donc :
- 4 (0ème enfant)
- 8 (1er enfant)
- 12 (2ème enfant)
- 16 (3ème enfant)
Remarque : Si vous avez des éléments de différents types (par exemple, div, h1, p) dans l'élément parent, vous devez utiliser :nth-of-type() au lieu de :nth-child() pour vous assurer uniquement compter les éléments du type spécifié.
Exemple :
En supposant ce qui suit HTML :
<body> <h1></h1> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <h2></h2> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <h2></h2> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <h2></h2> <div>13</div> <div>14</div> <div>15</div> <div>16</div> </body>
Pour sélectionner un élément div sur quatre, utilisez :
div:nth-of-type(4n)
Cela sélectionnera :
- div 1
- div 5
- div 9
- div 13
Cas particulier :
L'utilisation de 4n équivaut à 4n 4 en termes de :ntième- enfant(). En effet, le décompte commence à 0. Par conséquent, les sélecteurs suivants sélectionneront les mêmes éléments :
- :nth-child(4n)
- :nth-child(4n 4)
Cependant, cela n'est pas toujours le cas pour d'autres nièmes opérateurs et valeurs.
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!