如何使用CSS選擇第一個類為“red”的元素并設置其樣式？

css樣式設置：精準定位首個特定類元素

網頁開發中，常需對特定類別的首個元素進行單獨樣式設定。例如，僅將第一個擁有”red“類的元素設為紅色。本文探討幾種實現方法。

問題描述：

html結構中包含多個相同類名的元素，如何僅為第一個擁有”red”類的元素應用特定CSS樣式？

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <div id="test">   我是span   <h1 class="red">我是h1，只設置我的樣式為紅色</h1>   <h1 class="red">我是h1</h1>   <h1 class="red">我是h1</h1>   <h1>我是h1</h1> </div>

解決方案：

實現目標，可采用JavaScript或CSS方法。

方法一：JavaScript

利用JavaScript的querySelector方法，可直接選取第一個擁有”red”類的元素，并設置其樣式：

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

document.querySelector('.red').style.color = 'red';

方法二：css選擇器

現代CSS提供更簡潔的方案，nth-child和nth-last-child偽類可選擇特定類別的首個或末個元素。:nth-child(1 of .red) 選擇第一個擁有”red”類的元素：

:nth-child(1 of .red) {   color: red; }  /* 選擇最后一個 */ :nth-last-child(1 of .red) {   color: blue; }

注意：nth-child和nth-last-child的這種用法存在瀏覽器兼容性問題，需謹慎使用并測試兼容性。

通過以上方法，即可輕松為第一個擁有特定類的元素設置樣式，達到預期視覺效果。

以上就是如何使用CSS選擇第一個類為“