CSSのn番目の子セレクターを使用して範囲内の特定の要素をターゲットにする方法は?

CSS n 番目の子範囲セレクター

n 番目の子セレクターを使用すると、位置に基づいてコンテナ内の特定の要素をターゲットにすることができます。特定の範囲に適応させる場合は、次のアプローチを検討してください。

nth-child(?):nth-child-X

このアプローチは、特定の範囲の要素を対象としています。位置 (例: nth-child(2)) からシーケンスの最後 (例: nth-child-X):

.myTableRow td:nth-child(2):nth-child(-n+4){
  background-color: #FFFFCC;
}

nth-child(n X):nth-child (-n Y)

このより明確なアプローチには、特定の範囲番号が含まれています。

.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}

ここで、nth-child(n 2) は位置 2 以降のすべての子を選択します。 nth-child(-n 4) は、位置 4 までのすべての子を選択します。

nth-child(X-Y)

この構文は、開始値を減算することで特定の範囲をターゲットにします。終了位置からの位置:

.myTableRow td:nth-child(2-4){
  background-color: #FFFFCC;
}

予期しない結果を避けるために、n 番目の子セレクターを使用するときは、要素の合計数を考慮することを忘れないでください。

以上がCSSのn番目の子セレクターを使用して範囲内の特定の要素をターゲットにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。