Wie kann ich mit :nth-child() effizient jedes N-te Element in CSS auswählen?

Auswahl jedes N-ten Elements in CSS

Beim Umgang mit einer Reihe von Elementen ist es oft notwendig, bestimmte Elemente in regelmäßigen Abständen auszuwählen. Beispielsweise möchten Sie möglicherweise jedes vierte, sechste oder zehnte Element auswählen. Traditionell wurde dies durch die explizite Angabe jedes n-ten Elements erreicht, wie zum Beispiel:

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

Es gibt jedoch eine effizientere Möglichkeit, dies mit dem Selektor :nth-child() zu erreichen.

Verwendung des Selektors „:nth-child()“

Mit dem Selektor :nth-child() können Sie arithmetische Ausdrücke erstellen unter Verwendung der n-Variablen. Das bedeutet, dass Sie Addition, Subtraktion und Koeffizientenmultiplikation durchführen können.

Um jedes vierte Element auszuwählen, würden Sie den folgenden Selektor verwenden:

div:nth-child(4n)

Dieser Ausdruck bedeutet, dass er mit jedem Element übereinstimmt das sind 0n, 4n, 8n und so weiter.

Umgang mit verschiedenen Elementtypen

Es ist wichtig Beachten Sie, dass dieser Ausdruck davon ausgeht, dass alle untergeordneten Elemente vom gleichen Typ sind. Wenn Sie Elemente unterschiedlichen Typs wie h1 oder p haben, sollten Sie stattdessen :nth-of-type() verwenden:

  <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>

div:nth-of-type(4n)

Zählen von 1 vs. 0

In CSS beginnt die Variable n mit dem Zählen bei 0. Wenn Sie also den Ausdruck 4n verwenden, werden die Elemente mit dem Index 0, 4, 8 usw. ausgewählt. Wenn Sie von 1 an zählen möchten, können Sie stattdessen den Ausdruck 4n 1 verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit :nth-child() effizient jedes N-te Element in CSS auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!