Comment puis-je sélectionner efficacement chaque nième élément en CSS à l'aide de :nth-child() ?-tutoriel CSS-php.cn

Comment puis-je sélectionner efficacement chaque nième élément en CSS à l'aide de :nth-child() ?

Mary-Kate Olsen

Libérer： 2024-12-22 10:26:40

original

465 Les gens l'ont consulté

How Can I Efficiently Select Every Nth Element in CSS Using :nth-child()?

Sélection d'un chaque nième élément en CSS

Lorsqu'il s'agit d'un ensemble d'éléments, il est souvent nécessaire de sélectionner des éléments spécifiques à intervalles réguliers. Par exemple, vous souhaiterez peut-être sélectionner un élément sur quatre, sixième ou dixième. Traditionnellement, cela était réalisé en spécifiant explicitement chaque nième élément, tel que :

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

Copier après la connexion

Cependant, il existe un moyen plus efficace d'y parvenir en utilisant le sélecteur :nth-child().

Utilisation du sélecteur ":nth-child()"

Le sélecteur :nth-child() vous permet de construire des expressions arithmétiques en utilisant le n variables. Cela signifie que vous pouvez effectuer des additions, des soustractions et des multiplications de coefficients.

Pour sélectionner un élément sur quatre, vous utiliserez le sélecteur suivant :

div:nth-child(4n)

Copier après la connexion

Cette expression signifie qu'elle correspondra à chaque élément. c'est-à-dire 0n, 4n, 8n, etc.

Gestion de différents types d'éléments

Il est important de noter que cette expression suppose que tous les éléments enfants sont du même type. Si vous avez des éléments de types différents, tels que h1 ou p, vous devez plutôt utiliser :nth-of-type() :

<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

div:nth-of-type(4n)

Copier après la connexion

Compter de 1 contre 0

En CSS, la variable n commence à compter à partir de 0. Par conséquent, si vous utilisez l'expression 4n, elle sélectionnera les éléments d'index 0, 4, 8, etc. Si vous souhaitez compter à partir de 1, vous pouvez utiliser l'expression 4n 1 à la place.

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!