:first-child與:first-of-type 區別

admin發表於2018-11-28

標題中兩個選擇器的更多用法可以參閱如下兩篇文章：

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

（2）.CSS E:first-of-type 選擇器一章節。

兩個選擇器在某些場景下表現完全一致，所以會造成一些困擾。

功能簡述如下：

（1）.E:first-child選擇器匹配父元素下，E型別，第一個子元素，。

（2）.E:first-of-type選擇器匹配父元素下，E型別、相同型別標籤元素集合中第一個子元素。

首先給出兩個選擇器的區別簡單總結：

E:first-child匹配的是父元素的第一個子元素（E型別）。

而E:first-of-type匹配的是父元素下各個標籤型別集合中第一個子元素（E型別）。

看了前面的總結如果還不太清晰，不用擔心，後面有詳細的程式碼演示。

特別說明：E表示一個CSS選擇器，不要誤解為僅表示元素選擇器。

首先看一段程式碼例項：

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/28/140618nwmmuf31zwi2i0iz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼中兩個選擇器表現完全相同，再來看一段程式碼例項：

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/28/140643daxqm8h708rq5h5p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

span:first-child匹配div第一個子元素，但最必須是span元素，所以第一個div中沒有符合要求的。

span:first-of-type匹配div下第一個span元素。

上面的程式碼並沒有完全體現出E:first-of-type選擇器的功能，下面單獨對其進行一下演示。

程式碼例項如下：

[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;
}
span,a{display:block}
h1{font-size:16px;}
</style>
</head>
<body>
  <div>
    <p class="a">螞蟻部落一</p>
    <span class="a">螞蟻部落二</span>
    <span>螞蟻部落三</span>
    <h1>螞蟻部落四</h1>
    <h1 class="a">螞蟻部落四</h1>
    <a>螞蟻部落四</a>
  </div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/28/140706nb85uyiyaqz8b254.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.首先使用利用class選擇器匹配到所有class屬性值為"a"的元素。

（2）.然後按照標籤型別將匹配到元素進行分類，將每一個類別中的第一個元素顏色設定為藍色。

（3）.p元素只有一個，當然也算是第一個，所以字型顏色設定為藍色。

（4）.具有兩個span元素，但是class屬性值等於"a"的那個是span元素集合的第一個，所以匹配成功。

（5）.具有兩個h1元素，class屬性值為"a"的h1元素位於h1元素集合第二位，匹配失敗。

最後總結如下：

E:first-child滿足如下兩個條件即可匹配成功：

（1）.元素被E選擇器匹配。

（2）.且位於父元素的第一位。

E:first-of-type匹配成功需要滿足如下條件：

（1）.元素被E選擇器匹配。

（2）.且元素位於各個標籤類別集合的第一位。

相關文章