【CSS】伪类选择器之 :nth-child() 和 :nth-of-type() 的区别

1. 示例代码

CSS 代码

        div {
            font-weight: bold;
        }

        div :nth-of-type(2) {
            color: blue;
        }

        div :nth-child(1) {
            color: red;
        }

HTML 代码

    <div>
        <span>sp</span>
        <span>sp</span>
        <i>i</i>
        <span>sp</span>
        <i>i</i>
        <span>sp</span>
        <span>sp</span>
        <p>
            <span>sp</span>
            <span>sp</span>
        </p>
        <span>sp</span>
    </div>

2. 实际效果

3. 总结

:nth-child(n): 第一个子元素，一次只在一层标签嵌套中选出一个
:nth-of-type(n): 不同标签的第一个子元素，一次选出的元素个数根不同标签出现次数有关

---

补充

<div id="out">
  <div>
    <p></p>
  </div>
  <p>这个p的选择器应该是 div#out>p:nth-of-type(2)</p>
</div>