nth-of-type()和nth-child()選擇器的區別

antzone發表於2017-04-05

標題中的兩個選擇器，有不少朋友對它們之間的區別還不夠明瞭，下面就做一下簡單介紹。

關於兩個選擇器的用法可以參閱以下兩篇文章:

（1）.nth-of-type()一章節。

（2）.nth-child()一章節。

其實如果認真閱讀上面兩篇文章，充分理解了兩個選擇器的使用，那麼區別自然瞭然於胸。

這裡為了方便學習，就將它們的主要區別在這裡做一下介紹，需要的朋友可以做一下參考。

區別如下:

nth-child()強調的是父元素下的子元素（這時候並不在意元素型別），然後從這些子元素中再進行篩選。

nth-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">
p:nth-child(2) {
  color:green;
}
</style>
</head>
<body>
  <h1>螞蟻部落</h1>
  <p>螞蟻部落一</p>
  <p>螞蟻部落二</p>
  <p>螞蟻部落三</p>
  <p>螞蟻部落四</p>
</body>
</html>

在上面的程式碼中，首先是查詢body的子元素中的第二個元素（不區分元素型別），然後檢視第二個元素是否是p元素，如果是，則將其字型顏色設定為綠色。它強調的是從子元素中篩選，並不區分型別。

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

上面的程式碼是首先區分型別，獲取了h1元素集合和p元素集合。

然後從p元素集合中查詢出第二個元素，然後將其字型顏色設定為綠色。

相關文章