看CSS3時發現了一個nth-of-type選擇器,發現平常基本上沒見過用,就研究了一下,w3c是這樣說明的:
:nth-of-type(n) 選擇器符合屬於父元素的特定類型的第 N 個子元素的每個元素.
看起來跟nth-child很像
:nth-child(n) 選擇器符合屬於其父元素的第 N 個子元素,不論元素的類型。
那麼兩者差別到底是什麼?試驗一下吧。
HTML:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> box: </span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pox"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> pox: </span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
CSS:
<span style="color: #800000;"> <style> .box</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>; }<span style="color: #800000;"> .pox</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 100px 0 0 60px</span>;<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>; }<span style="color: #800000;"> .pox p:nth-child(1)</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }<span style="color: #800000;"> .box p:nth-of-type(1)</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }<span style="color: #800000;"> </style></span>
結果貌似相同:
這裡稍微做一下改變HTML:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> box: </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div1<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div2<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pox"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> pox: </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div2<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
結果:
這裡發現nth-child沒有起作用,這是為什麼呢?
其實p:nth-of-type(n)是指父元素下第n個p元素,而p:nth-child(n)是指父元素下第n個元素且這個元素為p,若不是,則選擇失敗。
這裡的pox下的第一個子元素是div而不是p,所以選擇失敗。若想p1變紅,p1是pox下的第二個子元素應該選擇nth-child(2),應該改為:
<span style="color: #800000;">.pox p:nth-child(2)</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }
結果: