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>

效果如下圖所示:
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章