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

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

news 2025/12/31 6:45:41

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

  • 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元素。符合这个条件的只有 <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> ```

那么符合条件的就是

				<p>吃的啥</p><p>1</p><p>2</p><p>3</p>

后续兄弟选择器

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

请添加图片描述

<!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元素。符合条件的：

 			<p>吃的啥</p> <p>太美味啦</p><p>1</p><p>2</p><p>3</p> ```

在这里插入图片描述

后代选择器

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

			#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选择器权重的排名为：

  1. !important声明：权重最高，通常不建议使用，因为它会破坏CSS的层叠性，可能会引起样式冲突和难以维护的问题。
  2. 内联样式：在HTML元素中直接定义样式，也就是使用style属性。它的权重高于其他选择器，但不如!important声明。
  3. ID选择器：使用#符号定义，每个ID只能在文档中出现一次。它的权重高于类选择器和属性选择器。
  4. 类选择器、伪类选择器、属性选择器：它们的权重相等，都是一般选择器。类选择器使用.符号定义，属性选择器使用[]符号定义，伪类选择器使用:符号定义。
  5. 元素选择器，伪元素选择器：它们的权重最低，都是基本选择器。元素选择器使用标签名定义，伪元素选择器使用::符号定义。 需要注意的是，当多个选择器权重相同时，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选择器，这一篇就够了

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

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

1-1 微服务架构概述

文章目录微服务架构概述1-1. 系统进化理论概述集中式系统&#xff1a;分布式系统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

uniapp传参

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…...

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

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

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

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

自指（Self-reference）

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

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

关于Hanoi塔的实现

关于Hanoi塔的实现 首先&#xff0c;在此之前&#xff0c;我们需要了解一下递归这个东西&#xff1b; 在我看来&#xff0c;递归这个东西就是栈的进出&#xff1b; 向下&#xff1a;进栈回溯&#xff1a;出栈 在进栈之前标记状态&#xff0c;输入到栈中&#xff1b; #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&#xff0c;也可以采用外部Hive。企业开发中&#xff0c;通常采用外部Hive。 一、内嵌Hive应用 内嵌Hive&#xff0c;元数据存储在Derby数据库。 &am…...

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

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

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

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

实习生JAVA知识总结目录

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

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

GMPC认证有哪些内容?

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

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

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

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

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

Java基础面试题

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

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

SQL和MongoDB对比

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

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

研究链表空间销毁问题

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

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

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/12/31 3:33:31

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/12/27 8:18:45

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/12/30 21:35:11

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/12/30 3:27:21

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2025/12/28 19:47:57

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/12/27 15:21:20

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2025/11/23 4:18:28