0基础和小Q学前端---css(2)特殊的选择器

最新推荐文章于 2023-03-08 13:37:24 发布

智达教育‍

最新推荐文章于 2023-03-08 13:37:24 发布

阅读量421

点赞数 11

分类专栏：前端进阶文章标签：前端 css 开发语言

本文链接：https://blog.csdn.net/qq_29235677/article/details/127279621

版权

前端进阶专栏收录该内容

14 篇文章 1 订阅

订阅专栏

📢📢📢📣📣📣
哈喽！大家好，我是「奇点」，江湖人称 singularity。刚工作几年，想和大家一同进步🤝🤝
一位上进心十足的【Java ToB端大厂领域博主】！😜😜😜
喜欢java和python，平时比较懒，能用程序解决的坚决不手动解决😜😜😜

✨ 如果有对【java】感兴趣的【小可爱】，欢迎关注我

❤️❤️❤️感谢各位大可爱小可爱！❤️❤️❤️
————————————————

如果觉得本文对你有帮助，欢迎点赞，欢迎关注我，如果有补充欢迎评论交流，我将努力创作更多更好的文章。

👩‍🏫：上节课我们学习了普通的选择器，包括元素选择器、类选择器、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了。

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

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的基本知识，并学习了伪类选择器和伪元素选择器的一些简单的使用场景，这些特殊的选择器并没有直接定义内容的样式，而是通过定义一些描述，如第一行，第一个，最后一个等选中的元素、第一行元素等等，通过限制来实现内容的改变。由于相对较简单做简单的整理。

选择器分类
伪类选择器	:first-child {}	//第⼀项
	:last-child {}	//最后⼀项
	:nth-child(n) {}	//第n项
	:nth-child(2n+1){}	//奇数项
	:nth-child(2n) {}	//偶数项
	:not()	//否定伪类除了第n项其他的设置

伪元素选择器	::first-letter	//第⼀个元素
	::first-line	//第⼀⾏只能⽤于块级元素
	::selection	//选中
	::before	//在开始位置在开始的位置加一个内容 content表示
	::after	//在结束位置

智达教育‍

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
6
评论
0基础和小Q学前端---css(2)特殊的选择器

👨‍🏫：在学习伪类选择器的时候，我们先学习一下DOM的基本知识，我们在前端的学习中经常会发现DOM这个高频词，那么什么是DOM呢？DOM是文档对象模型（Document Object Model）的缩写。是 W3C（万维网联盟）的标准。是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
复制链接

扫一扫