ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。