前端——伪类选择器

最新推荐文章于 2024-09-12 00:30:07 发布

翊小宸

最新推荐文章于 2024-09-12 00:30:07 发布

阅读量402

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45058912/article/details/118528445

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了CSS中关于选择器的应用，特别是伪类选择器的使用，如`:first-child`、`:last-child`和`:nth-child()`。通过示例展示了如何用CSS改变列表中特定元素的颜色，例如将第一个子元素设为红色，最后一个设为蓝色，第三个设为棕色。虽然注释中提到了`:not()`否定伪类，但实际代码中并未使用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* 
            将ul中的第一个li设置为红色
        */

        /* 
        伪类（不存在的类，特殊的类）
            -伪类用来描述一个元素的特殊状态
                比如：第一个子元素、被点击的元素、鼠标移动的元素……
            -伪类一般情况下都是使用 ：开头
                :first-child 第一个子元素
                :last-child 最后一个子元素
                :nth-child() 选中第n个子元素
                    特殊值：
                        n 第n个 n的范围0到正无穷
                        2n或even 表示选中偶数位的元素
                        2n+1或odd 表示选中奇数位的元素
                    以上这些伪类都是根据所有的子元素进行排序

                :first-of-type   找同类型中的第一个子元素   
                :last-of-type    找同类型中的最后一个元素
                :nth-last-of-type()   找同类型中的第n个元素
                    以上这些伪类的功能和上述的类似，不同点是它们是在同类型元素中进行排序


                :not() 否定伪类
                    将符合条件的元素从选择器中去除
        */

        ul > li:first-child{
            color: red;
        }

        ul > li:last-child{
            color: blue;
        }

        ul > li:nth-child(3){
            color: brown;
        }

        /* 
        ul > li:not(:nth-child(3)){
            color: yellowgreen;
        } 
        */

    </style>


</head>
<body>
    
    <!--
        <ul>
            <li></li>
        </ul> 
        ul > li 加 Tab键或回车键
    -->
    <ul>
        <span>我是一个span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

</body>
</html>