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

n 番目の要素のグループの CSS セレクター

指定された CSS セレクター、`.myTableRow td:nth-child(?){
背景色: #FFFFCC;
} を使用すると、n 番目の子 の特定のスタイルをターゲットにして設定できます。 .myTableRow 要素内の要素。ただし、2 から 4 の ` 列をターゲットにするように変更する必要があります。

解決策:

これを実現するには、次の CSS を使用できます。 selector:

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

このセレクターは、次の構文で :nth-child() セレクターを利用します:

• :nth-child(n X): すべての子要素を選択します。 X 番目の位置以降。
• :nth-child(-n x): X 番目の位置までのすべての子要素を選択します。

これら 2 つのセレクターを組み合わせることで、その範囲内の要素をターゲットにできます。特定の範囲。

例:

提供された HTML 構造内:

  

    
column 1
    
column 2
    
column 3
    
column 4
    
column 5
  

変更された CSS セレクター `.myTableRow td を適用します。 nth-child(n 2):nth-child(-n 4){
 背景色: #FFFFCC;
}、` 列 2、3、および 4 の背景色を設定します。 #FFFFCC に送信します。
以上がCSS セレクターを使用して n 番目の子要素の特定の範囲をターゲットにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。