CSS 偽類 :first-of-type表示一組兄弟元素中其類型的第一個(gè)元素。
選擇的 p 元素是其父元素的第一個(gè) p 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(cainiaoplus.com)</title>
<style>
/* 選擇在父元素中第一個(gè)出現(xiàn)的<p>，而不管其在兄弟內(nèi)的位置如何 */
p:first-of-type {
color: red;
}
</style>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是第一個(gè)段落。</p>
<p>這是第二個(gè)段落。</p>
<p>這是第三個(gè)段落。</p>
<p>這是第四個(gè)段落。</p>
</body>
</html>測試看看 ?/?:first-of-type 選擇器匹配元素其父級(jí)是特定類型的第一個(gè)子元素。
提示: 和 :nth-of-type(1) 是一個(gè)意思。
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
| 選擇器 | |||||
|---|---|---|---|---|---|
| :first-of-type | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |