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

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

news 2026/2/7 18:05:40

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

  • 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

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

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

编程新知 2026/2/1 21:34:47

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2026/1/29 3:25:02

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/11/9 21:54:26

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2026/2/5 18:18:58

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...

编程新知 2026/1/23 17:06:01

云原生时代的系统设计：架构转型的战略支点

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、云原生的崛起&#xff1a;技术趋势与现实需求的交汇 随着企业业务的互联网化、全球化、智能化持续加深&#xff0c;传统的 I…...

编程新知 2026/1/30 23:57:50

Linux信号保存与处理机制详解

Linux信号的保存与处理涉及多个关键机制&#xff0c;以下是详细的总结&#xff1a; 1. 信号的保存 进程描述符&#xff08;task_struct&#xff09;&#xff1a;每个进程的PCB中包含信号相关信息。 pending信号集&#xff1a;记录已到达但未处理的信号&#xff08;未决信号&a…...

编程新知 2025/11/30 8:32:54

本地部署drawDB结合内网穿透技术实现数据库远程管控方案

文章目录 前言1. Windows本地部署DrawDB2. 安装Cpolar内网穿透3. 实现公网访问DrawDB4. 固定DrawDB公网地址 前言 在数字化浪潮席卷全球的背景下&#xff0c;数据治理能力正日益成为构建现代企业核心竞争力的关键因素。无论是全球500强企业的数据中枢系统&#xff0c;还是初创…...

编程新知 2026/1/30 6:03:28