nth-child、nth-of-type的区别先来看下nth-child、nth-of-type的描述:nth-chi

先来看下nth-child、nth-of-type的描述

:nth-child(n) 选择属于其父元素的第n个子元素的每个 <p> 元素。

:nth-of-type(n) 选择属于其父元素第n个 <p> 元素的每个 <p> 元素。

下面直接看代码和效果

<!DOCTYPE html>
    <html>
        <head>
            <style> 
                p {
                  height: 30px;
                  background-color: red;
                }
                p:nth-child(2) {
                  background-color: yellow;
                }
            </style>
        </head>
        <body>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </body>
    </html>

<!DOCTYPE html>
    <html>
        <head>
            <style> 
                p {
                  height: 30px;
                  background-color: red;
                }
                p:nth-of-type(2) {
                  background-color: yellow;
                }
            </style>
        </head>
        <body>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </body>
    </html>

下面我们加点干扰元素，把第二个p标签换成div，并在标签中加上文字描述，方便观察

<!DOCTYPE html>
    <html>
        <head>
            <style> 
                p {
                  height: 30px;
                  background-color: red;
                }
                p:nth-child(2) {
                  background-color: yellow;
                }
            </style>
        </head>
        <body>
            <p>p</p>
            <div>div</div>
            <p>p</p>
            <p>p</p>
        </body>
    </html>

此处没有p标签位于父元素的第二个标签，因此没有变色

<!DOCTYPE html>
    <html>
        <head>
            <style> 
                p {
                  height: 30px;
                  background-color: red;
                }
                p:nth-of-type(2) {
                  background-color: yellow;
                }
            </style>
        </head>
        <body>
            <p>p</p>
            <div>div</div>
            <p>p</p>
            <p>p</p>
        </body>
    </html>

此处选中的是同一个父元素下的p标签中的第二个