CSS實例：-nth-child和-nth-type-of的區別

2020-03-24 16:46:03

字體：大中小

來源：轉載

供稿：網友

假設有以下 HTML 代碼： section
p Little /p
p Piggy /p !--目標元素--
/section 以下代碼得到的效果一樣：p:nth-child(2){color:red;}
p:nth-of-type(2){color:red;}結果雖然相同，但是兩者本身還是有所區別的。:nth-child 選擇符從詞義上來說，表示，選擇滿足以下條件的元素：1. 是一個段落元素 p
2. 是父元素的第二個子元素
:nth-of-type 選擇符從詞義上來看，表示：1. 選擇父元素的第二個段落元素 p
:nth-of-type 是 hellip; 怎么說好呢，哈~ … 較少條件要約的。假設結構變化如下： section
h1 World /h1
p Little /p
p Piggy /p !--目標元素--
/section 那么，這種方式就“破”了：p:nth-child(2){color:red;}但是，這個還是”能用”的：p:nth-of-type(2){color:red;}所謂的“破”，意思是上面的 :nth-child 選擇符現在選到的是 “Little”，而不是 “Piggy”，因為這個元素滿足以下所有條件：1) 它是第二個字元素
2）它是一個段落元素 p
所說的“能用”，意思是 “Piggy” 仍然被選中，因為它是它父元素下的第二個段落元素 p 。如果在 h1 之后增加一個 h2，那么 :nth-child 選擇符就什么也選中不了了，因為那時第二個子元素就不再是段落元素 p 了。但是 :nth-of-type 仍然還是有效的。我感覺 :nth-of-type 相對不那么脆弱，而且總的來說更加有用，盡管 :nth-child 更加常見（作者個人意見）。你有多少時候在想“我想選擇父元素的第二個子元素，如果它恰巧是個段落元素 p” 這事呢？可能有那么幾次，但是更多的可能是你想“選中第二個段落”或者“每隔兩行選擇一行 (select every third table row)”，也就是說 :nth-of-type 是更加好的一個選擇（再次聲明，作者個人意見）。我發現當我抱怨“為什么 :nth-child 選擇符不行？”時，絕對多數的情況是因為在選擇符前限定了標簽，而那個位置的子元素不是那個標簽。因此在使用 :nth-child 時，我覺得最好還是只指定父元素并且不要用標簽來限制 :nth-child 。dl :nth-child(2) {} /* 推薦 */
dd:nth-child(2) {} /* 不是很好 */當然，具體情況還得具體分析。（我咋這么不喜歡這句話呢 ndash; 糖伴西紅柿）瀏覽器對于 :nth-of-type 的支持是相當不錯的…Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+。如果需要更多的支持，jQuery 應該會挺你的（使用選擇符，添加一個類名，使用類名來添加樣式 $(“selector:nth-child(xxxxx)”).addClass(“someClass”)），但是實際上 jQuery 卻放棄了對 :nth-of-type 的支持，這很奇怪啊，據說是因為 :nth-of-type 的使用率很低。有個插件可以使得 jQuery 支持它。相關：不要忘了它這些了不起姊妹們 :first-of-type :last-of-type :nth-last-of-type 和 :only-of-type 。這里有一個 Lea Verou 做的可視化示例。
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS比表格更難嗎？

下一篇：CSS實例：無懈可擊的CSS圓角技術