2024年0基础和小Q学前端---css(2)特殊的选择器_特殊选择器(2)，作为一个程序员你觉得最大的悲哀是什么

2401_84160041

于 2024-05-09 11:34:16 发布

阅读量377

点赞数 4

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

本文链接：https://blog.csdn.net/2401_84160041/article/details/138607127

版权

程序员专栏收录该内容

186 篇文章 0 订阅

订阅专栏

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

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

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

👩‍🏫：上节课我们学习了普通的选择器，包括元素选择器、类选择器、id选择器、通配符选择器和派生选择器，这些选择器都是一般的选择器，比较通用，今天我们就来唠唠比较特殊的选择器。今天的主角是伪类选择器和伪元素选择器，看看这些特殊的选择器是如何使用的。

伪类选择器：

DOM的概述

👨‍🏫：在学习伪类选择器的时候，我们先学习一下DOM的基本知识，我们在前端的学习中经常会发现DOM这个高频词，那么什么是DOM呢？

DOM是文档对象模型（Document Object Model）的缩写。是 W3C（万维网联盟）的标准。是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
HTML DOM 节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
DOM树

2.编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

3. 查找元素

document.getElementById("apple"); //找到id为appel的标签，因为id是唯一的，所以是element(ID选择器)
document.getElementsByTagName("like"); //找到like标签的所有元素的节点列表(标签选择器)
document.getElementsByClassName("pdd"); //找到class为pdd的标签的所有元素的节点列表(class选择器)

总之dom就是一种标准规范，给我们提供了一只结构化的方式，让我们能读取和修改文档。

👨‍🏫：有了dom的概念，我们进行来学习伪类选择器，dom给我们提供的一种功能就是能给改变文档，而伪类选择器是一种不改变任何DOM内容，只是插入了一些修饰类的元素的选择器就是伪类选择器。

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

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

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

5225625326)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

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

2401_84160041

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录