- :first-child
- :first-of-type New in Firefox 3.5
- :last-child
- :last-of-type New in Firefox 3.5
- :nth-child() New in Firefox 3.5
- :nth-of-type() New in Firefox 3.5
- :nth-last-child() New in Firefox 3.5
- :nth-last-of-type() New in Firefox 3.5
- :only-of-type New in Firefox 3.5
- :only-child
這些屬性都成雙成對；有first就有last，有child就有type...etc，然後再給他的排列組合，搞了這麼多種出來，各個差異的說明文看得我鬼打牆= =。
first- 和last- 的意思很好區別：選擇這種元件(element)的第一個或最後一個，再來的nth- 和nth-last-也容易理解：選擇第N個或從後面數來第N個。那child和type的差別是什麼呢？請參照右下方框格的result ，左上方框則是原始碼，或把下方那段噁心英文存成.html檔用瀏覽器打開。
<!DOCTYPE html>
<html lang="xh-tw">
<head>
<meta charset="utf-8">
<style type="text/css">
p:nth-of-type(3){background:#ff0000;}
p:nth-child(3){border:2px solid blue;}
p:nth-child(2){border:2px solid blue;}
</style>
</head>
<body>
<div>
<p>1st The first paragraph.</p>
<h1>2nd This is a heading</h1>
<p>3rd The second paragraph.</p>
<p>4th The third paragraph.</p>
<p>5th The fourth paragraph.</p>
<p><b>Note:</b> Internet Explorer does not support the :nth-last-of-type() selector.</p>
</div>
</body>
</html>
使用:nth-child指定的項目，套上藍色框框；使用:nth-of-type則用紅底表示。除了第二行是<h1>包起來的，其餘都是由<p>組成。
:nth-child()
例子中可以看出，p:nth-child(3)的選擇依據是：<p>這孩子(element)的老木div(parent)從上數來的第三個小孩<p>3rd The second paragraph.</p>，套上:nth-child所指定的樣式：藍色框框。
換句話說，p:nth-child(3)包含了兩種條件的判別：1、你是p，2、你排行老三，兩種條件皆成立，才可套用{}裡面的樣式。如例子中排行老二的是h1，因此p:nth-child(2)沒有作用。
p:nth-child(3)裡雖然有個「child」，但其實指定的還是P的手足們(sibling)，而P的非子嗣(child)。
p:nth-of-type()
p:nth-of-type(3)也是選擇<p>(element)的老木<div>(parent)的子女，但不同的是，同樣是<p>標籤的才給與計數。於是p:nth-of-type(3)將第三個<p>4th The third paragraph.</p>，套上紅背景。
即p:nth-of-type(3)選擇的是p所在、這代中的第三個p。
結論
如果把p當女兒，則：
p:nth-child(3){ } ：如果老三是女兒，才套用此樣式
p:nth-of-type(3){ }：不管老幾，第三個女兒就用此樣式
nth-child()有更多指定排行的變化用法，請見上方清單聯接。
註：2013/5/25 更新
沒有留言:
張貼留言