Maison >interface Web >tutoriel CSS >Comment puis-je sélectionner efficacement chaque nième élément en CSS à l'aide de :nth-child() ?
Comment puis-je sélectionner efficacement chaque nième élément en CSS à l'aide de :nth-child() ?
- Mary-Kate Olsenoriginal
- 2024-12-22 10:26:40525parcourir
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)
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)
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>
div:nth-of-type(4n)
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!