E:last-child與E:last-of-type區別

admin發表於2018-11-28
AST

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

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

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

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

俗話說，存在即合理，雖然這話有時候經不起推敲，但是在CSS中基本就是真理。

絕對不會設計出功能完全相同的兩個選擇器，下面介紹一下它們之間的區別。

選擇器功能簡述如下：

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

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

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

E:last-child匹配的是父元素的最後一個子元素（E型別）。

而E:last-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:last-child{
  color:blue;
}
#two li:last-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/010314m7oxjowr7dhjhjjo.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:last-child{
  color:blue;
}
#two span:last-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/010345f49mh6bqyf9ifqqm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

span:last-of-type匹配到最後一個span元素。

上面的程式碼並沒有完全體現出E:last-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:last-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/010415v1boozu3c2onc0c1.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:last-child滿足如下兩個條件即可匹配成功：

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

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

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

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

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

相關文章