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

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

news 2025/7/9 0:39:33

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

  • 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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/7/8 12:01:52

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/6/21 5:31:03

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/7/7 6:14:26

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/7/8 14:40:54

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/7/8 15:28:22

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2025/7/8 16:20:24

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/7/8 7:13:34

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/7/8 18:18:58

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/7/8 3:33:25