最全0基础和小Q学前端---css(2)特殊的选择器_特殊选择器(3)，2024年最新阿里P8成长路线

2401_84165953

于 2024-05-12 06:18:19 发布

阅读量313

点赞数 5

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84165953/article/details/138740762

版权

程序员专栏收录该内容

186 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

👨‍🏫：下面我门来学习一下这个伪类选择器的用法，在学习之前我们先考虑一个需求，就是将列表中第一个元素设置成荧光绿色，在没有学习伪类选择器之前我们能通过其他的选择器实现这个功能。例如id选择器。

👩‍🎓：这个很简单，就是id选择器的简单实用，就像下面

<!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>
        #first {
            color: chartreuse;
        }
    </style>
</head>

<body>
    <ul>
        <li id="first">前端</li>
        <li>后端</li>
        <li>测试</li>
        <li>大数据</li>
    </ul>
</body>

</html>

👩‍🏫：是的，通过其他的选择器能实现这个功能，当然用今天的主角能更简单的实现这个功能。但是我们学习完js之后，这种方式就有弊端了。例如这个列表动态的获取数据，通过后端接口获取数据，渲染列表，再定义第一个数据就会有问题，例如只让第一个设置成某一个样式，但是上面的方法是歇斯写死的，并不能实现第一个的样式设定，那么实现这个需求，我们就要学习伪类选择器，让他来实现我们的需求。

👩‍🏫：伪类选择器有很多的功能，下面是常用的使用方法的总结：

:first-child {}  //第⼀项

:last-child {}  //最后⼀项

:nth-child(n) {}  //第n项

:nth-child(2n+1){}  //奇数项

:nth-child(2n) {}  //偶数项

:not() //否定伪类 除了第n项

下面我们来实现之前的需求，设置列表中的第一个元素的样式，并不少直接写死的样式

<!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>
        /* #first {
            color: chartreuse;
        } */
        
        li:first-child {
            color: chocolate;
        }
    </style>
</head>

<body>
    <ul>
        <!-- <li id="first">前端</li> -->
        <li>后端</li>
        <li>测试</li>
        <li>大数据</li>
    </ul>
</body>

</html>

👩‍🏫：这里我们就需要 :first-child {}这个属性。只修改第一个元素的样式

下面是第n项的设置方法：

        li:nth-child(2) {
            color: crimson;
        }

 /* 除了第3项，其他都设置样式 */
        
        li:not(:nth-child(3)) {
            color: darkcyan;
        }

同理其他的设置方式按我的总结就ok了。

👩‍🏫：我们在使用浏览器的时候，通常对访问的和未访问的浏览器都会设置不同的颜色，这个也是伪类选择器的功劳，下面是对连接的设置

a:link {color:#FF0000;}  /*未访问的链接*/

a:visited {color:#00FF00;} /*已访问的链接*/

a:hover {color:#FF00FF;}  /*⿏标悬浮后的链接*/

a:active {color:#0000FF;} /*已选中的链接*/

例如对未访问的浏览器设置一个颜色

       a:link {
            color: darksalmon;
        }

伪元素选择器：

👩‍🏫：学习了伪类选择器之后，我们来看伪元素选择器的使用，伪元素选择器能给我们选定的元素进行设置，例如将文本的第一个字母设置成红色

  .text::first-letter {
            color: red;
        }

这里css3都是以::两个冒号开始的，css2是一个冒号开始的

 <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione accusantium ut dignissimos recusandae esse. Veritatis pariatur dolore deserunt atque enim reprehenderit aliquid expedita voluptas quas cum nostrum modi, accusamus officia.

    </div>

这是对伪元素选择器的总结：

::first-letter //第⼀个

::first-line //第⼀⾏只能⽤于块级元素

::selection //选中

::before //在开始位置在开始的位置加一个内容 content表示

::after //在结束位置

 .text::before {
            content: '好好学习';


![img](https://img-blog.csdnimg.cn/img_convert/737eb8c354ff95910e66d415a36af587.png)
![img](https://img-blog.csdnimg.cn/img_convert/2b4a29031935eff2e4a3f5ce98442ca4.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84165953

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
最全0基础和小Q学前端---css(2)特殊的选择器_特殊选择器(3)，2024年最新阿里P8成长路线

👨‍🏫：下面我门来学习一下这个伪类选择器的用法，在学习之前我们先考虑一个需求，就是将列表中第一个元素设置成荧光绿色，在没有学习伪类选择器之前我们能通过其他的选择器实现这个功能。例如id选择器。👩‍🎓：这个很简单，就是id选择器的简单实用，就像下面👩‍🏫：是的，通过其他的选择器能实现这个功能，当然用今天的主角能更简单的实现这个功能。但是我们学习完js之后，这种方式就有弊端了。
复制链接

扫一扫