CSS中的first-of-type偽類選擇器可以用來選中同類型元素中的第一個元素并為其設置樣式。這個選擇器可以用于多個標簽元素,例如p、div、span等等。
下面是一個具體的示例代碼:
HTML代碼:
<div class="container"> <h1>標題1</h1> <p>第一段文字</p> <p>第二段文字</p> <h2>標題2</h2> <p>第三段文字</p> <p>第四段文字</p> </div>
登錄后復制
CSS代碼:
p:first-of-type { font-weight: bold; }
登錄后復制
在上面的代碼中,我們選擇了第一個p標簽元素并將其設置為粗體字。結果在瀏覽器中會顯示出來的效果是,第一段文字會被設置為粗體字。
同樣的,我們也可以使用first-of-type選擇器來選擇其他標簽元素的第一個。例如:
h1:first-of-type { font-size: 24px; }
登錄后復制
這里我們選擇了第一個h1標簽元素并將其字體的大小設置為24像素。
需要注意的是,使用first-of-type選擇器僅能選擇同類型元素的第一個元素。如果我們要選擇不同類型元素中的第一個元素,可以使用:first-child。
總之,使用first-of-type偽類選擇器能夠非常方便地為同類型元素中的第一個元素設置特定的樣式。