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

无空格

---

作用域为冒号前面标签的兄弟节点及其子节点

• p:nth-child(2)：1、表示这是个段落标签；2、这是父标签的第二个孩子元素

<div>
    <p>p1</p>
    <p>p2 变红
            <span>sss变红</span>
    </p>
    <p>p3</p>
</div>
//解释：div里面有三个p标签，只有p标签是div的第二个子标签才会变红，当在p1前面加一个span标签，则变红色是p1。

• p:nth-of-type(2)：父标签的第二个段落子元素内容

<div>
    <span>span</span>
    <p>p1</p>
    <p>p2 变红
        <span>sss变红</span>
    </p>
    <p>p3</p>
</div>
//解释：div里有三个p标签，排在第二的p字体变红色，
//只要该p标签前面有一个p标签，无论前面有多少个其他的标签字体都会变成红色。

---

有空格

---

作用域为冒号前面的标签的子节点

• p :nth-child(2)：表示p标签的第二个子标签

<p>
    ppp
    <i>i1</i>
    <b>b1变红</b>
    <b>b2</b>
</p>
//解释：b标签是p标签的第二个子标签，并且p标签自己并不会变红

• p :nth-of-type(2)：

<p>
    ppp
    <i>i1</i>
    <b>b1</b>
    <span>span</span>
    <b>b2变红</b>
    <span>span变红</span>
</p>
//解释：只要p标签里面有两个相同类型的标签，那么第二个标签就会变红