如何使用 CSS nth-child 選擇器來定位範圍中的特定元素？

CSS nth-child 範圍選擇器

nth-child 選擇器可讓您根據容器內的位置定位特定元素。當使其適應特定範圍時，請考慮以下方法：

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 nth-child 選擇器來定位範圍中的特定元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！