伪类与伪类选择器

comegoing-归去兮来

已于 2022-07-31 08:56:28 修改

阅读量247

点赞数

分类专栏：前端css基础文章标签： css 前端 html

于 2022-07-11 20:45:09 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125729655

版权

前端css基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一、常见使用

1、伪类的使用

带有:（冒号）的为伪类，用以解决常见选择器和复合选择器无法解决的状态问题，一般和列表list结合使用

2、常见伪类使用

（1）first-child

列表中的第一个元素（这里表示对ul无序列表操作）

ul:first-child{color: blue;}

第二个例子表示对ul无序列表的第一个li元素操作，但因为第一个元素不是li，操作失败

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

（2）first-of-type

列表中规定类型的第一个元素（这里表示ul无序列表中li子元素中第一个li标签）

ul>li:first-of-type{color: red;}

（3）nth-child(input)

input表示自己给定的值，可以为1，2，3，n等等，表示列表中第input个元素（这里表示ul无序列表第3元素）

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

（4）nth-of-type(intput)

表示列表中第input个规定类型的元素，这里表示ul无序列表li元素第3个

ul>li:nth-of-type(3){color: skyblue;}

二、代码实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类</title>
    </head>
    <style>
        /* 第一个元素 */
        ul:first-child{
            color: blue;
        }
        /* 第一个li元素 */
        ul>li:first-of-type{
            color: red;
        }
        /* 第三个元素 */
        ul>li:nth-child(3){
            color: orange;
        }
        /* 第三个li元素 */
        ul>li:nth-of-type(3){
            color: skyblue;
        }
        /* 可以用even，odd表示选择奇数或者偶数，n表示全选（意思就是可以用函数表示） */
    </style>
    <body>
        <ul>
            <span>我是第一个span</span>
            <li>我是第一个li</li>
            <li>我是第二个li</li>
            <li>我是第三个li</li>
            <li>我是第四个li</li>
            <li>我是第五个li</li>
        </ul>
    </body>

</html>