Heim >Web-Frontend >CSS-Tutorial >Wie kann ich jedes N-te Element in CSS effizient auswählen?
Wie kann ich jedes N-te Element in CSS effizient auswählen?
- Patricia ArquetteOriginal
- 2024-12-24 20:28:11654Durchsuche
Jedes n-te Element in CSS auswählen
Frage:
Gibt es eine effiziente Möglichkeit, jedes n-te Element in einem auszuwählen? Satz von Elementen, ohne jedes Element aufzulisten einzeln?
Antwort:
Ja, mit der Pseudoklasse :nth-child() mit arithmetischen Ausdrücken können Sie Elemente basierend auswählen von ihrer Position in der untergeordneten Liste.
Die Syntax von :nth-child() ermöglicht verschiedene arithmetische Operationen, einschließlich:
- Addition ( )
- Subtraktion (-)
- Koeffizientenmultiplikation (an)
Um beispielsweise jedes vierte Element auszuwählen, verwenden Sie Folgendes Selektor:
:nth-child(4n)
Dieser Ausdruck beginnt die Zählung bei 0, sodass ausgewählt wird:
- 4 (0. Kind)
- 8 (1. Kind)
- 12 (2. Kind)
- 16 (3 child)
Hinweis: Wenn Sie Elemente unterschiedlichen Typs (z. B. div, h1, p) innerhalb des übergeordneten Elements haben, sollten Sie :nth-of verwenden -type() anstelle von :nth-child(), um sicherzustellen, dass Sie nur Elemente des angegebenen zählen Typ.
Beispiel:
Angenommen, der folgende HTML-Code:
<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>
Um jedes vierte div-Element auszuwählen, verwenden Sie:
div:nth-of-type(4n)
Dadurch wird ausgewählt:
- div 1
- div 5
- div 9
- div 13
Sonderfall:
Verwendung 4n entspricht 4n 4 in Bezug auf :nth-child(). Dies liegt daran, dass die Zählung bei 0 beginnt. Daher wählen die folgenden Selektoren dieselben Elemente aus:
- :nth-child(4n)
- :nth-child(4n 4)
Dies ist jedoch bei anderen möglicherweise nicht immer der Fall n-te Operatoren und Werte.
Das obige ist der detaillierte Inhalt vonWie kann ich jedes N-te Element in CSS effizient auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!