当前位置：首页 > news >正文

【13种css选择器】学css选择器，这一篇就够了

news 文章来源：https://blog.csdn.net/dyk11111/article/details/129396973 2025/4/23 2:07:34

举例形象让你学会，不搞官方话

css所有的选择器
- 相邻兄弟选择器
- 后续兄弟选择器
- 后代选择器
- 子代选择器
- 并集选择器(多重选择器)
- 属性选择器
- 伪类选择器
- 伪元素选择器
- class选择器（类选择器）
- id选择器
- *选择器（通配符选择器）
- 标签选择器
- 组合选择器
css选择器权重排名

css所有的选择器

相邻兄弟选择器

以+分隔开前后选择器
用于选择与指定元素在同一层级且后一个相邻元素的元素

请添加图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>#eg p+p {background-color: blue;}</style></head><body><div id="eg"><p>你好</p><div><p>吃了吗</p><p>吃的啥</p><div>好吃不</div> <p>太美味啦</p></div></div></body>
</html>

这里面的#eg p+p表示：
id为eg的元素里，紧接着p元素的第一个p元素。符合这个条件的只有 吃的啥

如果结构是这样：

		<div id="eg"> 			<p>你好</p> <div><p>吃了吗</p><p>吃的啥</p><p>1</p><p>2</p><p>3</p><div>好吃不</div><p>太美味啦</p> 			</div></div> ```

那么符合条件的就是
				吃的啥123

后续兄弟选择器

以~分隔开前后选择器
用于选择与指定元素在同一层级且在它后面的所有相邻元素

请添加图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>#eg p~p{background-color: blue;}</style></head><body><div id="eg"><p>你好</p><div><p>吃了吗</p><p>吃的啥</p><div>好吃不</div><p>太美味啦</p><p>1</p><p>2</p><p>3</p></div></div></body>
</html>

这里面的#eg p~p表示：
id为eg的元素里，紧接着p元素的所有p元素。符合条件的：
 			吃的啥 太美味啦123 ```

在这里插入图片描述

后代选择器

以分隔开前后选择器（空格）

			#eg p{background-color: blue;}

这里的#eg p表示：
id为eg的元素里所有的p元素背景颜色为蓝色，哪怕嵌套一百层p标签，也还是蓝色。
你的儿子，你，你爸都是你爷爷的后代，所以你爷爷都可以管你们

子代选择器

以>分隔开前后选择器

			#eg>p{background-color: blue;}

这里的#eg>p表示：
id为eg的元素里面的第一代所有p元素背景颜色为蓝色
在这个选择器里，关系是这样的：
你爸爸是你爷爷的儿子，所以你爷爷可以管你爸爸
你是你儿子的爸爸，所以你可以管你儿子
但是你爷爷管不了你，管不了你儿子，只能管邻近的子代，也就是只能管你爸爸

并集选择器(多重选择器)

以，分隔开前后选择器
请添加图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>p,span,#ad {background-color: blue;}</style></head><body><p>你好</p><div>我的朋友</div><span>你吃了吗</span><span>柯南</span><div id='ad'>我的朋友</div></body>
</html>

这里的p，span，#ad表示：
所有的p标签和所有的span标签和id名字为ad的标签，背景颜色为蓝色

属性选择器

根据元素的属性值来选择元素

请添加图片描述

<!DOCTYPE html>
<html><head><style>div[title~=add] {color: aqua;font-size: 2em;}</style></head><body><div title="add">张三</div><div title="aff add">李四</div><div title="haha">王五</div><div title="add">赵六</div></body>
</html>

这里的div[title~=add]表示：
所有div里满足title属性里有add的设置字体颜色为青色，大小为2em

如果是这样

div[title=add] {color: aqua;font-size: 2em; 			} ’

则表示
所有div里满足title属性里只有add的设置字体颜色为青色，大小为2em

伪类选择器

用来选取元素的特殊状态
如:hover :active :visited :first-child :last-child
请添加图片描述

<!DOCTYPE html>
<html><head><style>div>p:nth-child(3):hover{color: aqua;font-size: 2em;}</style></head><body><div><p>张三</p><p>李四</p><p>王五</p><p>赵六</p></div></body>
</html>

这里的div>p:nth-child(3):hover表示：
div元素里的第三个p元素设置悬停效果，当鼠标悬停在这个元素上改变样式

伪元素选择器

用来选取元素的某个部分
如::before ::after
请添加图片描述

<!DOCTYPE html>
<html><head><style>p:nth-child(2)::before{content: '@';}p:nth-child(3)::after{content: '@';}</style></head><body><div><p>张三</p><p>李四</p><p>王五</p><p>赵六</p></div></body>
</html>

这里的
：：before指的是给第二个p元素前面加@符号；
：：after指的是给第三个p元素后面加@符号
content：‘添加的元素’ 这是固定语法

class选择器（类选择器）

用.来获取元素
请添加图片描述

<!DOCTYPE html>
<html><head><style>.aaa{color: red;}</style></head><body><div><p class="aaa">张三</p><p class="aaa">李四</p><p>王五</p><p>赵六</p></div></body>
</html>

这里的.aaa表示所有名字为aaa的元素，改变其字体颜色为红色
class选择器也叫类选择器，相当于定义某些元素为一类，直接选取这一类元素

id选择器

用#来获取元素
请添加图片描述

<!DOCTYPE html>
<html><head><style>#aaa{color: red;}</style></head><body><div><p id="aaa">张三</p><p>李四</p><p>王五</p><p>赵六</p></div></body>
</html>

这里的#aaa表示名字为aaa的元素，改变其字体颜色为红色
id选择器的权重比类选择器更高，这意味着如果一个元素同时有id和class属性，并且这两个属性都有样式规则，那么id选择器的样式规则将被应用

*选择器（通配符选择器）

用*设置所有元素的样式

			*{color: red;}

*表示全部，上面代码的意思是页面中所有元素的字体颜色都为红色

标签选择器

用标签名字选择元素

			div{color: red;}

上面代码表示的意思是页面所有div元素的字体都为红色

组合选择器

为了应对各种布局样式，各种dom元素的复杂结构，就有了组合选择器。
组合选择器就是将各种基本选择器通过一定规则连接起来变成一个复杂的多功能选择器基本的，单一的选择器，相当于你会不同的法术。
组合选择器，相当于你把所有法术有机结合，战斗力更猛。

组合选择器除了用在css中，对于js的dom操作，网络爬虫的html解析时，都非常有用。
常规的css，就是把这些规则应用到selector指定的元素上，组合选择器可以实现很多比较高级的功能。

css选择器权重排名

在CSS中，不同的选择器有不同的权重，当多个样式规则应用到同一个元素时，CSS会按照权重的高低来决定最终的样式。

CSS选择器权重的排名为：

!important声明：权重最高，通常不建议使用，因为它会破坏CSS的层叠性，可能会引起样式冲突和难以维护的问题。
内联样式：在HTML元素中直接定义样式，也就是使用style属性。它的权重高于其他选择器，但不如!important声明。
ID选择器：使用#符号定义，每个ID只能在文档中出现一次。它的权重高于类选择器和属性选择器。
类选择器、伪类选择器、属性选择器：它们的权重相等，都是一般选择器。类选择器使用.符号定义，属性选择器使用[]符号定义，伪类选择器使用:符号定义。
元素选择器，伪元素选择器：它们的权重最低，都是基本选择器。元素选择器使用标签名定义，伪元素选择器使用::符号定义。需要注意的是，当多个选择器权重相同时，CSS会采用就近原则，选择最后出现的样式规则应用到元素上。因此，在编写CSS样式时，需要注意选择器的权重和规则的顺序，以确保样式的正确应用。

这里要说明一下：
伪类选择器的权重与类选择器和属性选择器相等，都是一般选择器。它们的权重比元素选择器低，但比伪元素选择器高

请添加图片描述

<!DOCTYPE html>
<html><head><style>#box{color: red;}#box{color: blue;}</style></head><body><div><p id="box">张三</p><p>李四</p><p>王五</p><p>赵六</p></div></body>
</html>

在这里插入图片描述

因为同一个元素，给设置了不同的样式，都应用选择权重更高的样式
如果是id和class选择器选择同一元素，则应用id选择器下的样式
如果是id和id选择器选择同一元素，则应用最后设置的样式
如果在样式末尾加了！important 则不管什么选择器选择了同一元素，都会被！important无视

上面的例子如果改成这样：

			#box{color: red !important;}#box{color: blue;}

那一定只会显示红色，这就是css选择器的权重优先级

在这里插入图片描述

【13种css选择器】学css选择器，这一篇就够了

举例形象让你学会，不搞官方话css所有的选择器相邻兄弟选择器后续兄弟选择器后代选择器子代选择器并集选择器(多重选择器)属性选择器伪类选择器伪元素选择器class选择器（类选择器）id选择器*选择器（通配符选择器）标签选择…...

编程日记 2023/4/25 6:57:58

1-1 微服务架构概述

文章目录微服务架构概述1-1. 系统进化理论概述集中式系统：分布式系统1-2. 系统进化理论背景1-3. 什么是微服务架构1-4. 微服务架构的优缺点1-5. 为什么选择 Spring Cloud 构建微服务认识 Spring Cloud2-1. Spring Cloud 是什么2-2. Spring Cloud 的版本2-3 Spring C…...

编程日记 2023/4/25 6:57:51

//子传父子页面：sumbit() {console.log(this.formData, 传过去的内容对象)let pages getCurrentPages();let prevPage pages[pages.length - 2]; //上一个页面prevPage.$vm.getParams(this.formData); //重点$vmuni.navigateBack();},父页面接收：metho…...

编程日记 2023/4/25 6:57:37

面试官：说说你对 TypeScript 中函数的理解？与 JavaScript 函数的区别？

一、是什么函数是 JavaScript 应用程序的基础，帮助我们实现抽象层、模拟类、信息隐藏和模块在 TypeScript 里，虽然已经支持类、命名空间和模块，但函数仍然是主要定义行为的方式，TypeScript 为 JavaScript 函数添加了额外的功能…...

编程日记 2023/4/25 6:57:14

【测试】HD-G2L-IO评估板测试结果表

1. 测试对象HD-G2L-IOT基于HD-G2L-CORE V2.0工业级核心板设计，双路千兆网口、双路CAN-bus、2路RS-232、2路RS-485、DSI、LCD、4G/5G、WiFi、CSI摄像头接口等，接口丰富，适用于工业现场应用需求，亦方便用户评估核心板及CPU的性能。H…...

编程日记 2023/4/25 6:56:55

[2.2.1]进程管理——调度的概念、层次

文章目录第二章进程管理调度的概念、层次（一）调度的基本概念（二）调度的三个层次（1）高级调度（2）低级调度（3）中级调度补充知识：进程的挂起态与七状…...

编程日记 2023/4/25 6:56:43

【JavaScript UI库和框架】上海道宁与Webix为您提供用于跨平台Web应用程序开发的JS框架及UI小部件

Webix是Javascript库一种软件产品用于加速Web开发的 JavaScript UI库和框架 Webix用于跨平台Web应用程序开发的JS框架，为您提供102个UI小部件和功能丰富的CSS/HTML5 JavaScript控件开发商介绍 Webix团队由由热衷于创建高质量网络产品的专业人士组成&#xff…...

编程日记 2023/4/25 6:56:31

【微信小程序】-- WXS 脚本（二十九）

💌 所属专栏：【微信小程序开发教程】 😀 作者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！ &…...

编程日记 2023/4/25 6:56:21

案例19-遇见问题的临时解决方案和最终解决方案

目录1、背景介绍2、两种解决方案的概念1、临时解决方案：2、最终解决方案：3、排查问题过程4、总结站在用户的角度思考作为软件开发者5、升华1、背景介绍首先说明这是系统很早之前的时候的一个功能，当时和学习通还有很强的耦合关系。在学习通…...

编程日记 2023/4/25 6:56:11

自指（Self-reference）

文章目录1. 在逻辑、数学和计算方面2. 在生物学中3. 在艺术4. 在语言中5. 在流行文化中6. 在法律中自我参照（Self-reference）是一个涉及指代自己或自己的属性、特征或行为的概念。它可以发生在语言、逻辑、数学、哲学和其他领域。在自然语言或形式语言…...

编程日记 2023/4/25 6:55:59

关于Hanoi塔的实现

关于Hanoi塔的实现首先，在此之前，我们需要了解一下递归这个东西； 在我看来，递归这个东西就是栈的进出； 向下：进栈回溯：出栈在进栈之前标记状态，输入到栈中； #incl…...

编程日记 2023/4/25 6:55:54

原始套接字(Raw Socket)

原始套接字允许对较低层次的协议进行访问,如: IP协议,ICMP协议等一般用于自定义协议的实现,处理IP协议没有处理过的数据运输层下IP数据不关注内核是否已有注册的句柄来处理这些数据,都会将这些IP数据复制一份传递给与协议类型匹配的原始套接字,没有的话,直接丢弃该数据,并返回主…...

编程日记 2023/4/25 6:55:41

SparkSQL与Hive交互

SparkSQL与Hive交互一、内嵌Hive应用二、外部Hive应用三、运行Spark SQL CLI四、IDEA操作外部HiveSparkSQL可以采用内嵌Hive，也可以采用外部Hive。企业开发中，通常采用外部Hive。一、内嵌Hive应用内嵌Hive，元数据存储在Derby数据库。 &am…...

编程日记 2023/4/25 6:55:27

「题解」日常遇到指针面试题

🐶博主主页：ᰔᩚ. 一怀明月ꦿ ❤️‍🔥专栏系列：线性代数，C初学者入门训练，题解C，C的使用文章 🔥座右铭：“不要等到什么都没有了，才下定决心去做” &#x1…...

编程日记 2023/4/25 6:55:19

实习生JAVA知识总结目录

一.JAVA基础学习 JAVA知识点全面总结1：零散知识 JAVA知识点全面总结2：面向对象 JAVA知识点全面总结3：String类的学习 JAVA知识点全面总结4：异常类学习 JAVA知识点全面总结5：IO流的学习 JAVA知识点全面总结6&…...

编程日记 2023/4/25 6:55:08

GMPC认证有哪些内容?

【GMPC认证有哪些内容?】GMP(GMP Good Manufacturing Practice)即良好生产规范，最早是美国国会为了规范药品生产而于1963年颁布的。这也是世界上第一部GMP。由于GMP在规范药品的生产，提高药品的质量，保证药品的安全方面效果非常明显&#xf…...

编程日记 2023/4/25 6:54:53

D2-Net: A Trainable CNN for Joint Description and Detection of Local Features精读

开源代码：D2-Net 1 摘要在这项工作中，我们解决了在困难的成像条件下寻找可靠的像素级对应的问题。我们提出了一种由单一卷积神经网络发挥双重作用的方法：它同时是一个密集的特征描述符和一个特征检测器。通过将检测推迟到后期阶段&#xf…...

编程日记 2023/4/25 18:46:48

Java基础面试题

目录一，Java基础 1.1.JDK和JRE有什么区别？ 1.2.JAVA中的几种基本类型，各占用多少字节？ 1.3.和equals的区别是什么？ 1.4.final,finally,finalied有什么区别? 1.15.Java 中操作字符串都有哪些类？它们…...

编程日记 2023/4/25 6:54:39

SQL和MongoDB对比

关系型数据库如MySQL和非关系型数据库MongoDB的对应关系：SQLMongoDBdatabasedatabasetablecollectionrowdocument or Bson documentcolumnfieldindexindextable joins$lookupprimary keyprimary key指定任何唯一的列或列组合作为主键主键会自动设置为_id字段aggrega…...

编程日记 2023/4/25 0:33:49

研究链表空间销毁问题

💯💯💯 1.研究链表空间销毁问题当链表使用完后，需要将链表销毁，那么该如何销毁呢？ void SLTDestroy(SLTNode* phead)//销毁单链表 {SLTNode* cur phead;while(cur){free(cur);cur cur->next;} }你…...

编程日记 2023/4/25 0:33:44

Linux面试总结

一.常用命令1.目录切换cd / 切换到根目录cd ../ 切换到上级目录cd ~ 切换到home目录2.查看目录ls 列出当前目录下所有的文件ls [路径]ls / 查看根目录 ls -l 相当于 ll 最常用的命令,用了表的方式列出当前目录的内容3.查看当前目录pwd-4.创建一组空文件touch5.显示文件内容cat6…...

编程日记 2023/4/25 0:33:39

anaconda的linux版本以及jupyter的安装和DataSpell连接linux的jupyter服务器

anaconda安装：官网：https://www.anaconda.com/拷贝下载网址后，在Linux里进行下载：wget https://repo.anaconda.com/archive/Anaconda3-2022.10-Linux-x86_64.sh执行sh：./Anaconda3-2022.10-Linux-x86_64.sh 安装完后&a…...

编程日记 2023/4/25 6:54:29

Zookeeper集群和Hadoop集群安装（保姆级教程）

1. HA HA（Heigh Available）高可用解决单点故障，保证企业服务 7*24 小时不宕机单点故障：某个节点宕机导致整个集群的宕机 Hadoop 的 HA NameNode 存在单点故障的可能，需要配置 HA 解决引入第二个 NameNode 作为备份同…...

编程日记 2023/4/25 6:54:10

利用matlab的newff构建BP神经网络来实现数据的逼近和拟合

假设P是原始数据向量； T是对应的目标向量； 现在需要通过神经网络来实现P->T的非线性映射。 net newff(minmax(P),[16,1],{tansig,purelin},trainlm); net.trainParam.epochs 2000; net.trainParam.goal 1e-5; net init(net); net train(n…...

编程日记 2023/4/25 6:53:54

【经验分享】电路板上电就挂？新手工程师该怎么检查PCB？

小伙伴们有没有经历过辛辛苦苦，加班加点设计的PCB，终于搞定下单制板。接下来焦急并且忐忑地等待PCB板到货，焊接，验证，一上电，结果直接挂了... 连忙赶紧排查，找问题。最终发现，是打过…...

编程日记 2023/4/24 13:48:09

运筹系列68：TSP问题Held-Karp下界的julia实现

1. 介绍 Held-Karp下界基于1tree下界，但是增加了点权重，如下图通过梯度下降的方法找到最优的π\piπ。这里用到的1tree有下面几种： 全部点用来生成最小生成树，再加上所有叶子结点第二短的边中数值最大的那个任意选一个点&…...

编程日记 2023/4/25 6:53:34

神经影像信号处理总成(EEG、SEEG、MRI、CT)

目录一. EEG(脑电图)1.1 脑波1.2 伪迹1.2.1 眼动伪迹1.2.2 肌电伪迹1.2.3 运动伪迹1.2.4 心电伪迹1.2.5 血管波伪迹1.2.6 50Hz和静电干扰1.3 伪迹去除方法1.3.1 避免伪迹产生法1.3.2 直接移除法1.3.3 伪迹消除法二. SEEG(立体脑电图)三. CT（计算机断层扫描&#xff…...

编程日记 2023/4/25 6:53:20