如何使用CSS和JavaScript設置第一個類為xxx的元素的樣式？

精準定位并樣式化第一個特定類元素

本文介紹如何使用css和JavaScript選擇并設置第一個具有特定類名的元素的樣式。例如，如何只為第一個擁有類名”highlight”的元素應用樣式。

css選擇器方法

CSS的:nth-child選擇器并非直接針對類名選擇第一個元素，它選擇的是父元素下的第N個子元素。要選擇第一個具有特定類名的元素，需要結合其他選擇器。 這在實踐中可能比較復雜，且兼容性問題較多，因此不推薦作為首選方法。

更推薦的方法是使用JavaScript。

JavaScript方法：高效精準

JavaScript的querySelector方法提供了一種更直接、更可靠的方式來實現目標。

立即學習“Java免費學習筆記（深入）”；

以下代碼片段演示如何使用querySelector選擇第一個具有類名”highlight”的元素，并將其文本顏色設置為紅色：

document.querySelector('.highlight:first-of-type').style.color = 'red';

‘.highlight:first-of-type’ 選擇器確保只選擇第一個具有highlight類的元素，即使有多個元素擁有相同的類名。 first-of-type偽類選擇器能有效避免querySelector選擇多個元素的情況。

這種方法更簡潔、更易于理解和維護，并且兼容性更好。 它直接操作dom元素，避免了CSS選擇器可能帶來的復雜性和兼容性問題。

因此，對于設置第一個特定類元素的樣式，強烈推薦使用JavaScript的querySelector方法結合first-of-type偽類選擇器。