Comment puis-je sélectionner efficacement chaque nième élément en CSS ?-tutoriel CSS-php.cn

Comment puis-je sélectionner efficacement chaque nième élément en CSS ?

Patricia Arquette

Libérer： 2024-12-24 20:28:11

original

652 Les gens l'ont consulté

How Can I Efficiently Select Every Nth Element in CSS?

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)

Copier après la connexion

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>

Copier après la connexion

Pour sélectionner un élément div sur quatre, utilisez :

div:nth-of-type(4n)

Copier après la connexion

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!