2.2 结构伪类选择器 - 《HTML5 CSS3》

<style>
    /* 1.选择ul里面的第一个孩子 小li */
    ul li:first-child{
        background-color: purple;
    }
    /* 2.选择ul里面的最后一个孩子 小li */
     ul li:last-child{
        background-color: purple;
    }
    /* 3.选择ul里面的第二个孩子 小li */
    ul li:nth-child(2){
        background-color:green;
    }
    /* 4.选择ul里面的第五个孩子 小li */
     ul li:nth-child(5){
        background-color:green;
    }
</style>
<body>
    <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>
</body>

表格隔行变色

<style>
    /* 1.把所有的偶数even的孩子选出来 */
    ul li:nth-child(even){
        background-color: green;
    }
    /* 2.把所有的奇数odd的孩子选出来 */
    ul li:nth-child(odd){
        background-color:pink;
    }


</style>
<body>
    <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>
</body>

<style>
    /* 1.把所有的偶数even的孩子选出来 */
    ul li:nth-child(even){
        background-color: green;
    }
    /* 2.把所有的奇数odd的孩子选出来 */
    ul li:nth-child(odd){
        background-color:pink;
    }
     /* 3.nth-child(n)从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母*/
     ol li:nth-child(n){
         background-color: green;

     }

</style>
<body>
    <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>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>

</body>

     /* 4.nth-child(2n)选择了所有的偶数孩子 等价于even*/
     ol li:nth-child(2n){
         background-color: pink;
     }

E：first-of-type 与 nth-child 用法类似但也有区别

  <style>
  section div:nth-child(1){
        background-color: pink;
    }
</style>
<body>
    <!-- E：first-of-type 与 nth-child 用法类似  但也有区别 -->
    <section>
        <p>李敏镐</p>
        <div>张子枫</div>
        <div>郑群</div>
    </section>
</body>

没有被选中的内容

<style>
    /* :nth-child 会把所有盒子都排列序号
    执行的时候首先会看nth-child(1) 之后回去看 前面的div */
    section div:nth-child(1){
        background-color: pink;
    }
     /* :nth-of-type 会把指定元素的盒子排列序号
    执行的时候首先会看 前面的div指定的元素 之后回去看 nth-of-type（1）第几个孩子  */
    section div:nth-of-type(1){
        background-color: red;
    }
</style>
<body>
    <!-- E：first-of-type 与 nth-child 用法类似  但也有区别 -->
    <section>
        <p>李敏镐</p>
        <div>张子枫</div>
        <div>郑群</div>
    </section>
</body>

小结

权重