CSS3选择器nth-child和nth-of-type的区别

在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的区别

赞 (3)
分享到:更多 ()

发表评论 0