CSS E:last-of-type

admin發表於2018-11-05
CSSAST

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

概念分解如下：

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

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

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

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

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

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

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

語法結構：

[CSS] 純文字檢視 複製程式碼
E:last-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:last-of-type{
  color:blue;
}
</style>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/07/164254cdnxnvqdlkmi21k5.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:last-of-type{
  color:blue;
}
</style>
</head>
<body>
  <div>
    <p>螞蟻部落一</p>
    <p>螞蟻部落二</p>
    <div>螞蟻部落三</div>
  </div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/07/164327d5sn9vzzx58fkn22.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:last-of-type{
  color:blue;
}
</style>
</head>
<body>
  <ul>
    <li class="a">螞蟻部落一</li>
    <li class="a">螞蟻部落二</li>
    <li class="a">螞蟻部落三</li>
    <li>螞蟻部落四</li>
  </ul>
<body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/07/164400g0zbau0exjlezl00.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

程式碼分析如下：

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

（2）.選擇器中的type（標籤型別）限制作用將得以體現，類選擇器匹配的元素是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:last-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/07/164436hzzfqyuxryeqanfb.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元素集合的末尾，所以匹配失敗。

相關文章