CSS伪类选择器

结构伪类选择器通常根据文档结构来选择，常用于根据父级选择器里的子元素。

E元素是一个子元素，有父元素

1、E：first-child  选择作为第一个子元素的E元素

        li:nth-child(odd):排在奇数的li

        li:nth-child(even):排在偶数的li

2、E：first-of-type  选择所有子元素中的第一个E元素

<ul>
    <li>我是第1个</li>
    <li>我是第2个</li>
    <li>我是第3个</li>
    <li>我是第4个</li>
    <li>我是第5个</li>
    <li>我是第6个</li>
    <li>我是第7个</li>
    <li>我是第8个</li>
</ul>

<section>
    <p>1</p>
    <div>一</div>
    <div>二</div>
</section>

<style>
        ul li:first-child {
            background-color: pink;
        }
</style>

nth-child会把所有的盒子都排列序号 执行时候首先看:nth-chlid(1),之后会去看前面的div,两者不匹配故选不出来

:nth-of-type会把指定的盒子排列序号 
child是基于父元素编号，type是基于当前元素编号

<style>
        section div:nth-child(1) {
            background-color: red;
        }
        
        section div:nth-of-type(1) {
            background-color: pink;
        }
</style>