在CSS3选择器中的nth-child可以选择父元素下的字元素,但是nth-of-type也可以选择。但是它们到底有什么区别呢?
- nth-of-type为什么要叫:nth-of-type?因为它是以”type”(类型)来区分的;
- nth-of-type(n)是指父元素下第n个ele元素
- nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。
例子如下所示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:nth-child(3){ background:#00BFFF; } li:nth-of-type(3){ background: red; } </style> </head> <body> <ul> <p>ppppppp</p> <d>ppppppp</d> <li>111111</li> <li>222222</li> <li>333333</li> <li>444444</li> </ul> </body> </html>
欢迎分享本文,转载请保留出处:前端ABC » CSS3选择器nth-child和nth-of-type的区别