CSS3中nth-child與nth-of-type的差別其實很簡單::nth-of-type為什麼要叫:nth-of-type?因為它是以"type"來區分的。也就是說:ele:nth-of-type(n)是指父元素下第n個ele元素, 而ele:nth-child(n)是指父元素下第n個元素且這個元素為ele,若不是,則選擇失敗。
文字未免聽起來比較晦澀,便於理解,這裡附上一個小例子:
#<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <style> .demo li:nth-child(2){ color: #ff0000; } .demo li:nth-of-type(2){ color: #00ff00; } </style> <body> <p> <ul class="demo"> <p>zero</p> <li>one</li> <li>two</li> </ul> </p> </body> </html>
.demo :nth-child(2){ color: #ff0000; } .demo :nth-of-type(2){ color: #00ff00; }
<ul class="demo"> <p>first p</p> <li>first li</li> <li>second li</li> <p>second p</p> </ul>
注意:第一個子元素的下標是1
p:nth-of-type(odd) { background:#ff0000; } p:nth-of-type(even) { background:#0000ff; }
p:nth-of-type(3n+0) { background:#ff0000; }
#