CSS伪类选择器

最新推荐文章于 2025-12-22 23:19:01 发布

原创最新推荐文章于 2025-12-22 23:19:01 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

博客介绍了CSS结构伪类选择器，它依据文档结构选择元素，常用于根据父级选择器里的子元素。详细讲解了E:first-child、li:nth-child(odd)、li:nth-child(even)、E:first-of-type等选择器，还说明了nth-child和nth-of-type的编号规则差异。

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

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>