结构伪类选择器

小白前端攻城狮

已于 2023-02-14 19:45:20 修改

阅读量603

点赞数 1

文章标签：前端 html css3 css

于 2023-02-14 19:44:25 首次发布

本文链接：https://blog.youkuaiyun.com/m0_54104677/article/details/129032028

版权

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

css结构伪类选择器的出现，大大减少了HTML元素的id属性和class属性的依赖

:first-child和:last-child

下面举个例子演示:first-child 和:last-child伪类用法

结构如下：

 <ul>
        <li>喵喵</li>
        <li>火花</li>
        <li>水蓝蓝</li>
    </ul>

样式如下：

   li:first-child {
        background-color: greenyellow;
    }
    li:last-child {
        background-color: skyblue;
    }

运行结果如下：

:first-child 伪类可以改写成:nth-child(1)，而:last-child也可以改写成:nth-child(n)

E:first-of-type用于指定类型E的第一个，而E:last-of-type用于指定类型的最后一个

下面进行举例说明

结构如下：

   <div>火花</div>
    <p>喵喵</p>
    <p>蹦蹦种子</p>

样式如下：

    p:first-of-type {
        background-color: greenyellow;
    }
    p:last-of-type {
        background-color: gold;
    }

运行结果如下：

nth-child(n)选择某个父元素的一个或多个子元素

下面举例常用的公式

nth-of-type(n)也是类似，不同之处是，可以前往其它博客查看