nth-child和nth-of-type的区别

来源：互联网发布：斑马梦龙网络计划心得编辑：程序博客网时间：2024/05/28 23:11

在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>

效果如下图所示：
这里写图片描述

1 0