如何使用 CSS 選擇器定位特定範圍的第 n 個子元素？

第n 個元素組的CSS 選擇器

給定的CSS 選擇器`.myTableRow td:nth-child(?) {
背景顏色：#FFFFCC;
}，讓您為第n 個子元素定位並設定特定樣式

.myTableRow 元素內的元素。但是，您需要將其修改為目標 ` 列從 2 到 4。

解決方案：

要實現此目的，您可以使用以下CSS選擇器：

.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 個位置之前的所有子元素。

透過組合這兩個選擇器，您可以定位其中的元素特定範圍。

範例：

在提供的HTML 結構中：

<table>
  <tr class="myTableRow">
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
  </tr>
</table>

應用修改後的CSS 選擇器`.myTableRow td： nth- child(n 2):nth-child(-n 4){
背景顏色:#FFFFCC;
}，將設定

`第2、3和4列的背景顏色到#FFFFCC。

以上是如何使用 CSS 選擇器定位特定範圍的第 n 個子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！