CSS3的:nth-of-type(n)

文章專區

網頁設計相關文章

之前的文章曾介紹過CSS3:nth-child(n)選取器的功能，這次來介紹功能看似很像的:nth-of-type(n)。

:nth-of-type(n)跟:nth-child(n)一樣都是CSS3的偽類選取器，在寫法上和選取順序沒有太大的不同。

:first-of-type選取第一個元素

ex:

ul li{background:#4D90BB; }

ul li:first-of-type{ background: #E16F6F;}

:last-of-type選取最後一個元素

ul li: last-of-type{ background: #E16F6F;}

:nth-of-type(n)選取第n個元素

ul li:nth-of-type(3){ background: #E16F6F;} 選取的為第三項

:nth-of-type(odd)選取奇數

ul li:nth-of-type(odd){ background: #E16F6F;}

:nth-of-type(even)選取偶數

ul li:nth-of-type(even){ background: #E16F6F;}

:nth-of-type (an+b)自訂數列

ul li:nth-of-type(2n+1){ background: #E16F6F;}

n的值從0算起，因此第一與第三項會被選取

乍看之下跟nth-child(n)沒什麼不同，但參照以下範例便可理解兩者的不同之處。

範例：

CSS分別設定:

ul li:nth-of-type(3){ background: #E16F6F;}

ul li:nth-child(3){ background: #E16F6F;}

結果兩者相同

但若在每個li之間加上同層級的hr時

:nth-of-type能如實選取到指定的第三項li，而:nth-child卻選取到了第二項，這是為甚麼呢？因為以範例來說，:nth-child是選取了ul裡的第三個子元素，而這元素是li，所以同層級的hr也算進去了。

由以上實例可顯示，:nth-of-type比起:nth-child在選取上更精確、更不易出錯，所以建議若要指定某元素裡的第幾個標籤，可以多多使用:nth-of-type唷！