CSS E:first-of-type

admin發表於2018-11-11
CSS

E:first-of-type是偽類選擇器，匹配父元素下E型別子元素集合中，處於同標籤型別第一位的元素。

概念分解如下：

（1）.首先，元素必須是E型別，E是CSS選擇器。

（2）.其次，元素必須處於同標籤型別元素集合的第一位。

特別說明：注意子元素與後代元素的區別。

選擇器的命名通常與其功能息息相關，選擇器中的type就是指的標籤型別。

功能與E:first-child選擇器類似，更多內容參閱如下兩篇文章：

（1）.CSS E:first-child 選擇器一章節。

（2）.E:first-of-type與E:first-child區別一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:first-of-type{ Rules }

引數解析：

（1）.E：CSS選擇器。

（2）.Rules：CSS具體規則宣告。

瀏覽器支援:

（1）.IE9+瀏覽器支援此選擇器。

（2）.edge瀏覽器支援此選擇器。

（3）.谷歌瀏覽器支援此選擇器。

（4）.火狐瀏覽器支援此選擇器。

（5）.opera瀏覽器支援此選擇器。

（6）.safria瀏覽器支援此選擇器。

例項程式碼:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
li:first-of-type{
  color:blue;
}
</style>
</head>
<body>
  <ul>
    <li>螞蟻部落一</li>
    <li>螞蟻部落二</li>
    <li>螞蟻部落三</li>
    <li>螞蟻部落四</li>
  </ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/11/164804d7gigomimo5mmccu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.選擇器E是元素選擇器li，匹配到ul下所有li元素。

（2）.li元素集合中的第一個li匹配成功。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
p:first-of-type{
  color:blue;
}
</style>
</head>
<body>
  <div>
    <div>螞蟻部落一</div>
    <p>螞蟻部落二</p>
    <p>螞蟻部落三</p>
  </div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/11/164839a1k8969lnn3nf183.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼可以將第一個p元素的字型顏色設定為藍色。

由此可見，p元素沒必要必須是其父元素的第一個子元素，只要其同型別元素的第一個即可。

再來分析一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.a:first-of-type{
  color:blue;
}
</style>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li class="a">螞蟻部落二</li>
  <li class="a">螞蟻部落三</li>
  <li class="a">螞蟻部落四</li>
</ul>
<body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/11/164917d5lzxy01l2cul9lx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

沒有任何一個li的字型顏色被設定為藍色，匹配失敗。

可能不少朋友誤以為第二個li元素字型顏色會被設定為藍色。

程式碼分析如下：

（1）.class選擇器a匹配ul下後三個li元素。

（2）.選擇器中type（標籤型別）限制作用得以體現，".a"選擇器匹配li型別元素，那麼最終的匹配元素必須同時是li元素集合中的第一位，第二個li元素僅是class屬性值為"a"的li元素集合的第一個，並不是li元素集合的第一個。

最後再來分析一段程式碼例項，加深一下理解：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{display:block}
.a:first-of-type{
  color:blue;
}
</style>
</head>
<body>
  <div id="box">
    <span>螞蟻部落一</span>
    <span class="a">螞蟻部落二</span>
    <div id="ant">
      <div>螞蟻部落三</div>
      <span class="a">螞蟻部落四</span>
      <div id="inner">
        <span class="a">螞蟻部落五</span>
        <span>螞蟻部落六</span>
      </div>
    </div>
  </div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/11/164948hm07m371zs70ntk0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將第四個和第五個span元素字型顏色設定為藍色。

程式碼分析如下：

特別說明：為了陳述簡便，使用id屬性值指代對應元素。

（1）.對於box元素，它具有三個子元素，兩個span元素和ant元素，類選擇器"a"可以匹配第二個span元素，但是此span元素的位置並未處於同級span元素集合的首位，所以匹配失敗。

（2）.對於ant元素，它具有三個子元素，兩個div元素和一個span元素，類選擇器"a"可以匹配span元素，此元素雖然未處於同級元素的第一位，但是處於同級span元素的第一位（就它一個）。

（3）.對於inner元素，它具有兩個span元素，類選擇器"a"可以匹配第一個span元素，此元素處於同級span元素集合的首位，匹配成功。

相關文章