前端学习笔记24-伪类选择器

最新推荐文章于 2024-01-29 16:43:03 发布

小欣CZX

最新推荐文章于 2024-01-29 16:43:03 发布

阅读量250

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/115952379

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记24-伪类选择器

vscode快捷键
伪类选择器

vscode快捷键

输入ul>li，然后按住Tab键，就出现了如下代码

<ul>
    <li>
        
    </li>
</ul>

输入ul+li，然后按住Tab键，出现如下代码

<ul></ul>
<li></li>

越来越觉得vs code爽。

伪类选择器

当我们写如下代码时，根据前面所学知识，全部都红了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        ul>li{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

</body>
</html>

在这里插入图片描述
如果我们只想让第一个li元素变红，可以这么写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        ul>li.first{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class='first'>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

</body>

在这里插入图片描述
但是这样不香，因为如果我们在这个写了class的li前面再添加一个li后，变红的li还是原先那个有class的，并不是现在的第一个li了。这就需要伪类了。

伪类用来描述一个元素的特殊状态。比如第一个元素、被点击的元素、鼠标移入的元素。
伪类一般使用冒号开头。

:first-child

作用：设置ul第一个子元素，且这个子元素是li

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

在这里插入图片描述

:last-child

作用：设置ul最后一个子元素，且这个子元素是li


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

在这里插入图片描述

:nth-child（x）

作用：设置第x个子元素，且这个子元素是li

    <style>
        ul>li:nth-child(3){
            color: red;
        }
    </style>

在这里插入图片描述
这里有些特殊的，当x为n时，则是选中全部子元素；当x为2n时，则选中偶数位的元素。

    <style>
        ul>li:nth-child(2n){
            color: red;
        }
    </style>

在这里插入图片描述
如果想设置奇数位，可以写成2n+1。还有就是奇数可以写成odd，偶数可以写成even。这里就没一一讲了。

of-type

与上面三个对应的由first-of-type，last-of-type，nth-of-type()。区别是啥？先看个代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        ul>li:first-child{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <span>我是span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

</body>
</html>

这个代码中ul加了一个span在最前面，所以ul的第一个子元素是span，然后我们在用first-child，看看效果，第一个li没有变红，因为它不再是第一个子元素。
在这里插入图片描述
如果我们想设置ul中li子元素中的第一个li子元素，而不是所有子元素中第一个子元素且是li，就得用first-of-child了。看代码，

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

在这里插入图片描述

:not()

否定伪类：将符合条件的元素从选择器中去除。
不懂没关系，代码理解，为了更好理解，这里写了两种，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        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>
    </ul>

</body>
</html>

在这里插入图片描述

    <style>
        ul>li:not(:nth-of-type(3)){
            color: red;
        }
    </style>

在这里插入图片描述
这里第一种去除的是所有子元素的第三个，而第二种是去除li子元素的第三个。

小欣CZX

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习笔记24-伪类选择器

前端学习笔记24-伪类选择器vscode快捷键伪类选择器:first-child:last-child:nth-child（x）of-type:not()vscode快捷键输入ul>li，然后按住Tab键，就出现了如下代码<ul> <li> </li></ul>输入ul+li，然后按住Tab键，出现如下代码<ul></ul><li></li>越来越觉得v
复制链接

扫一扫