最全0基础和小Q学前端---css(2)特殊的选择器_特殊选择器(1)，再不刷题就晚了

最新推荐文章于 2024-07-29 09:10:44 发布

2401_84165953

最新推荐文章于 2024-07-29 09:10:44 发布

阅读量434

点赞数 20

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

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

版权

程序员专栏收录该内容

186 篇文章 0 订阅

订阅专栏

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

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

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

    }
</style>

前端
后端
测试
大数据

```

👩‍🏫：是的，通过其他的选择器能实现这个功能，当然用今天的主角能更简单的实现这个功能。但是我们学习完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: '好好学习';
        }

👩‍🏫：⚠️：这里要加’'否则展示不出

今天我们讲了伪类选择器和伪元素选择器两种特殊的选择器，在讲解之前也学习了一下DMO的基本知识，并学习了伪类选择器和伪元素选择器的一些简单的使用场景，这些特殊的选择器并没有直接定义内容的样式，而是通过定义一些描述，如第一行，第一个，最后一个等选中的元素、第一行元素等等，通过限制来实现内容的改变。由于相对较简单做简单的整理。


选择器分类

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

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

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

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

2401_84165953

关注

20
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
最全0基础和小Q学前端---css(2)特殊的选择器_特殊选择器(1)，再不刷题就晚了

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

扫一扫