018-伪类选择器

最新推荐文章于 2024-04-24 19:55:30 发布

一只老黄牛

最新推荐文章于 2024-04-24 19:55:30 发布

阅读量83

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36150351/article/details/113408179

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</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-of-type()
                        -  这几个伪类的功能和上述的类似

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

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

        ul > li:last-child{
            color: red;
        } */

        /* ul > :nth-child(odd){
            color: red;
        } */

        ul > li:not(:nth-child(3)){
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <span>我是一个span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
        <li>第六个</li>
    </ul>
</body>
</html>

一只老黄牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
018-伪类选择器

<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 将ul里的第一个li设置为红色 */ /* 伪类（不存在的类，特殊的类） -
复制链接

扫一扫