CSS で N 番目ごとの要素を効率的に選択するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS で N 番目ごとの要素を効率的に選択するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-24 20:28:11

オリジナル

649 人が閲覧しました

How Can I Efficiently Select Every Nth Element in CSS?

CSS 内の N 番目ごとの要素を選択する

質問:

CSS 内の N 番目ごとの要素を選択する効率的な方法はありますか?各要素をリストしない要素のセット個別に?

答え:

はい、算術式で :nth-child() 擬似クラスを使用すると、要素に基づいて要素を選択できます。

の構文:nth-child() では、次のようなさまざまな算術演算が可能です。

加算 ( )
減算 (-)
係数乗算(an)

4 つおきの要素を選択するには、たとえば、次のセレクターを使用します:

:nth-child(4n)

ログイン後にコピー

この式はカウントを 0 から開始するため、次を選択します:

4 (0 番目の子)
8 (1人目)
12 (2人目)
16 (3人目) child)

注: 親要素内に異なるタイプの要素 (div、h1、p など) がある場合は、:nth-of を使用する必要があります。 :nth-child() の代わりに -type() を使用して、指定された要素のみをカウントするようにします。 type.

例:

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

ログイン後にコピー

4 つおきの div 要素を選択するには、次を使用します: