CSS结构伪类选择器和伪元素 (day06)

mc.byte

已于 2022-07-24 09:03:05 修改

阅读量107

点赞数

分类专栏： web前端 # 笔记文章标签： css html 前端

于 2022-07-23 21:35:21 首次发布

本文链接：https://blog.csdn.net/m0_58044090/article/details/125952562

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

笔记

30 篇文章 0 订阅

订阅专栏

作用与优势：

1. 作用：根据元素在HTML中的结构关系查找元素

2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁 3. 场景：常用于查找某父级选择器中的子元

一：选择器：

代码时例：

<style>
        /* 找到li标签；并且这个li是它父元素的第一个孩子 */
        li:first-child{
            background-color: red;
        }
        /* 同理 */
        li:last-child{
            background-color: green;
        }
        li:nth-child(5) {
            background-color: blue;
        }

        /*找到li标签；并且这个li是他父元素的倒数第二个孩子  */
        li:nth-last-child(2){
            background-color: pink;
        }
</style>

<body>
    <ul>
        <li>这里是li标签</li>
        <li>这里是li标签</li>
        <li>这里是li标签</li>
        <li>这里是li标签</li>
        <li>这里是li标签</li>
        <li>这里是li标签</li>
        <li>这里是li标签</li>
        <li>这里是li标签</li>
        <li>这里是li标签</li>
    </ul>
</body>

二结构伪类选择器易错点分析：

/* 需求：我们找到第三个a, 设置字体颜色为orange*/

<style>
        /* 我们找到第三个a, 只能选中第三个li标签里面的a*/
        li:nth-child(3) a {
            color: orange;
        }
</style>
<body>
    <ul>
        <li><a href="">这是第1个a</a></li>
        <li><a href="">这是第2个a</a></li>
        <li><a href="">这是第3个a</a></li>
        <li><a href="">这是第4个a</a></li>
        <li><a href="">这是第5个a</a></li>
        <li><a href="">这是第6个a</a></li>
        <li><a href="">这是第7个a</a></li>
    </ul>
</body>