CSS 中沒有特定類別的情況下可以選擇最後一個子元素嗎？

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

在CSS 中，可以選擇最後一個子元素缺少指定的類別？例如，考慮以下 HTML 結構：

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

如何使用 CSS 選擇器只選擇第四行？嘗試使用以下選擇器是不夠的：

tr:not(.table_vert_controls):last-child

不幸的是，單獨使用 CSS 選擇器來實現這一點是不可行的。 :last-child 偽類專門針對最後一個孩子，並且沒有類似的 :last-of-class 偽類。

截至 2015 年，選擇器 4 引入了 :nth-child() 和 :nth-last-child() 的擴充選擇器，允許使用任意選擇器作為參數。這將允許使用以下語法：

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

但是，截至 2018 年 4 月，只有 Safari 支援此功能，因此廣泛的兼容性還需要幾年的時間。

替代方法：

在此期間，必須採用替代方法：

• 增加額外類別：在目標類之前新增一個類，然後選擇該新類的最後一個子級。
• jQuery 選擇器： 使用 jQuery 選擇器：

$('tr:not(.table_vert_controls):last')

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