CSS中如何選擇沒有特定類別的最後一個孩子？

在 CSS 中將 :last-child 與 :not(.class)選擇器組合

選擇最後一個沒有特定的子級類屬性似乎是一個簡單的任務，但它提出了一個挑戰CSS.

問題：

考慮以下HTML結構：

<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr class="table_vert_controls"> ... </tr>

目標是選擇第三行，即最後一行沒有「table_vert_controls」類別的子級。但是，以下選擇器不起作用：

tr:not(.table_vert_controls):last-child

CSS 選擇器的限制：

CSS 選擇器，包括:last-child，專門針對最後一個子級一個元素的。但是，沒有等效的偽類來選擇沒有特定類別的元素的最後一個子元素。

使用選擇器的解決方案 4：

後期2015 年，Selectors 4 引入了 :last-child 的擴展，允許將任意選擇器作為參數傳遞。這將啟用以下選擇器：

tr:nth-last-child(1 of :not(.table_vert_controls))

瀏覽器支援：

雖然某些瀏覽器已經開始實現此擴展，但它仍然沒有得到廣泛支持。

替代解決方案：

直到這個擴展更多廣泛支持的替代方法包括：

• 在「table_vert_controls」類別之前添加一個附加類別
• 使用jQuery：$(tr:not(.table_vert_controls):last)

以上是CSS中如何選擇沒有特定類別的最後一個孩子？的詳細內容。更多資訊請關注PHP中文網其他相關文章！