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

CSS中所有选择器详解

news 2025/6/19 19:30:19

文章目录

一、基础选择器
- 1.标签选择器
- 2.类选择器
- 3.id选择器
- 4.通配符选择器
二、复合选择器
- 1.交集选择器
- 2.并集选择器
三、属性选择器
- 1.[属性]
- 2.[属性=属性值]
- 3.[属性^=属性值]
- 4.[属性$=属性值]
- 5.[属性*=属性值]
四、关系选择器
- 1.父亲>儿子
- 2.祖先后代
- 3.兄+弟
- 4.兄~弟
五、伪类选择器
六、伪元素选择器

一、基础选择器

1.标签选择器

语法结构：标签名{css属性名：属性值;}
作用：通过标签名，找到页面中所有的这类标签，并设置样式。
注意

标签选择器选择的是一类标签，而不是单独的一个。
标签选择器无论嵌套关系有多深，都能够找到对应的标签。

<style>p {color: red;}
</style>
<body><div>111<p>2222<div>333<p>444</p></div></p></div>
</body>

在这里插入图片描述

2.类选择器

语法结构：.类名{css属性名：属性值;}
作用：通过类名，找到页面中所有的带有这个类名的标签，并设置样式。
注意

所有的标签上都有class属性，class属性的属性值成为类名。
类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头。
一个标签中可以同时有多个类名，类名之间用空格隔开。
类名可以重复，一个类选择器可以同时选中多个标签。

<style>.class-one {color: red;}.class-two {font-weight: bold;}
</style>
<body><div class="class-one">111<div><div class="class-one class-two">222</div></div></div></body>

在这里插入图片描述

3.id选择器

语法结构：#id属性值{css属性名：属性值;}
作用：通过id属性值，找到页面中带有这个id属性值的标签，并设置样式。
注意

所有的标签上都有id属性。
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的。
一个标签上只能有一个id属性值。
一个id选择器只能选中一个标签。

<style>#id-one {color: red;}
</style>
<body><div id="id-one">111</div>
</body>

在这里插入图片描述

4.通配符选择器

语法结构：*{css属性名：属性值;}
作用：找到页面中所有的标签，然后设置样式。
注意

开发中应用极少，只有在特殊的情况下才会使用。
在页面中可能会用于去除页面中默认的margin和padding。

<style>* {margin: 0;padding: 0;}
</style>
<body><div>111</div>
</body>

在这里插入图片描述

二、复合选择器

1.交集选择器

语法结构：选择器1选择器2{css样式}
作用：选中页面中同时满足多个选择器的标签。
注意

多个选择器之间没有任何东西隔开，紧挨着的。
交集选择器中如果有标签选择器，标签选择器必须放在前面。

<style>div.class-one {color:red;}div#id-one {color:green;}
</style>
<body><div class="class-one">111</div><div id="id-one">222</div><div>333</div>
</body>

在这里插入图片描述

2.并集选择器

语法结构：选择器1,选择器2{css样式}
作用：同时选择多组标签，设置相同的样式。
注意

选择器与选择器之间用,隔开。

<style>p, div, .class-one {color: red;}
</style>
<body><div class="class-one">111</div><div>222</div><p>333</p>
</body>

在这里插入图片描述

三、属性选择器

1.[属性]

作用：选中含有指定属性的元素。

<style>[title] {color: red;}
</style>
<body><div title="111">111</div><div>222</div>
</body>

在这里插入图片描述

2.[属性=属性值]

作用：选中含有指定属性和指定属性值的元素。
注意

属性值只能由数字，字母，下划线，中划线组成，并且不能以数字开头。

<style>[title=aaa] {color: red;}
</style>
<body><div title="aaa">aaa</div><div title="bbb">bbb</div>
</body>

在这里插入图片描述

3.[属性^=属性值]

作用：选中含有指定属性和指定属性值开头的元素。
注意

属性值只能由数字，字母，下划线，中划线组成，并且不能以数字开头。

<style>[title^=aaa] {color: red;}
</style>
<body><div title="aaa-one">aaa</div><div title="aa">bbb</div>
</body>

在这里插入图片描述

4.[属性$=属性值]

作用：选中含有指定属性和指定属性值结尾的元素。
注意

属性值只能由数字，字母，下划线，中划线组成，并且不能以数字开头。

<style>[title$=aaa] {color: red;}
</style>
<body><div title="aaa-one">aaa</div><div title="bbb-aaa">bbb</div>
</body>

在这里插入图片描述

5.[属性*=属性值]

作用：选中指定属性和含有指定属性值的元素。
注意

属性值只能由数字，字母，下划线，中划线组成，并且不能以数字开头。

<style>[title*=a] {color: red;}
</style>
<body><div title="aaa-one">aaa</div><div title="bbb-aaa">bbb</div>
</body>

在这里插入图片描述

四、关系选择器

1.父亲>儿子

作用：选择某元素后面的第一代子元素。

<style>.class-one > .class-two {color: red;}
</style>
<body><div class="class-one"><div class="class-two">aaa</div><div><div class="class-two">bbb</div></div></div>
</body>

在这里插入图片描述

2.祖先后代

作用：选择某元素后面的所有子元素。

<style>.class-one .class-two {color: red;}
</style>
<body><div class="class-one"><div class="class-two">aaa</div><div><div class="class-two">bbb</div></div></div>
</body>

在这里插入图片描述

3.兄+弟

作用：可选择紧接在另一元素后的元素，且二者有相同父元素。

<style>.class-one+.class-two {color: red;}
</style>
<body><div class="class-one">aaa</div><div class="class-two">bbb</div>
</body>

在这里插入图片描述

4.兄~弟

作用：选取某个元素之后的所有相同元素。
注意

比如.class-one ~ h2 这句就是选取 .class-one后面所有的 h2。
这个选择器两种元素必须处于同一个父元素内，被选取的元素不必直接紧随。

<style>.class-one ~ .class-two {color: red;}
</style>
<body><div class="class-one">aaa</div><div><div class="class-two">bbb</div></div><div class="class-two">ccc</div>
</body>

在这里插入图片描述

五、伪类选择器

请浏览博客：CSS中伪类详解和用法例子详解

六、伪元素选择器

请浏览博客：CSS中伪元素详解和用法例子详解

CSS中所有选择器详解

文章目录一、基础选择器1.标签选择器2.类选择器3.id选择器4.通配符选择器二、复合选择器1.交集选择器2.并集选择器三、属性选择器1.[属性]2.[属性属性值]3.[属性^属性值]4.[属性$属性值]5.[属性*属性值] 四、关系选择器1.父亲>儿子2.祖先后代3.兄弟4.兄~弟五、伪类选择…...

编程日记 2023/8/4 13:25:15

STM32 低功耗学习

STM32 电源系统结构介绍电源系统：VDDA供电区域、VDD供电区域、1.8V供电区域、后备供电区域。器件的工作电压（VDD）2.0~3.6V 为了提高转换精度，给模拟外设独立供电。电压调节器为1.8V供电区域供电，且1.8V供电区域是电…...

编程日记 2023/8/4 13:24:14

HCIP--云计算题库 V5.0版本

在国家政策的支持下，我国云计算应用市场发展明显加快，越来越多的企业开始介入云产业，出现了大量的应用解决方案，云应用的成功案例逐渐丰富，用户了解和认可程度不断提高，云计算产业发展迎来了“黄金机遇期”…...

编程日记 2023/8/4 13:23:11

小白到运维工程师自学之路第六十五集（docker-compose）

一、概述 Docker Compose 的前身是 Fig，它是一个定义及运行多个 Docker 容器的工具。可以使用YAML文件来配置应用程序的服务。然后，使用单个命令，您可以创建并启动配置中的所有服务。Docker Compose 会通过解析容器间的依赖关系（…...

编程日记 2023/8/4 13:22:11

量子机器学习

量子机器学习(QML)是结合量子计算和机器学习的交叉领域，旨在利用量子计算的优势来改进机器学习算法的性能。下面是一些有关量子机器学习的学习资源和技术应用： 学术论文和研究资料： ArXiv.org：在ArXiv的量子物理和机器学习类别中&…...

编程日记 2023/8/4 13:21:08

WEB集群——tomcat

1. 简述静态网页和动态网页的区别。 2. 简述 Webl.0 和 Web2.0 的区别。 3. 安装tomcat8，配置服务启动脚本，部署jpress应用。一、简述静态网页和动态网页的区别 （1）静态网页 1.什么是静态网页请求响应信息，发…...

编程日记 2023/8/4 13:20:06

Vulnhub: blogger:1靶机

kali：192.168.111.111 靶机：192.168.111.176 信息收集端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.176 在80端口的/assets/fonts/目录下发现blog目录，访问后发现为wordpress 利用wpscan发现wordpress插件wpdisc…...

编程日记 2023/8/4 13:19:05

老版MFC工程迁移到VC2019编译EXE太大的问题

有个老版静态链接MFC库的MFC程序需要迁移到VC2019编译，直接用VC2019打开就会自动迁移过去，然后编译一下，生成的EXE大小将近3MB，老版的工程编译出来也就600多KB。肯定哪里不对劲！ 好一顿研究之后发现原来默认会把MFC…...

编程日记 2023/8/4 13:18:04

Curve深陷安全事件，OKLink如何破局

出品｜欧科云链研究院作者｜Matthew Lee 7月31号，Curve 在平台表示 Vyper 0.2.15 的稳定币池由于编译器的漏洞所以遭到攻击。具体因为重入锁功能的失效，所以黑客可以轻易发动重入攻击，即允许攻击者在单次交易中执行某…...

编程日记 2023/8/4 13:17:03

2023华数杯数学建模思路A题B题C题模型代码分析

目录一.2023华数杯数学建模最新思路：比赛开始后第一时间更新更新查看文末名片二.往年华数杯赛题简介分析： 一.2023华数杯数学建模最新思路：比赛开始后第一时间更新更新查看文末名片二.往年华数杯赛题简介分析： 2022华数杯…...

编程日记 2023/8/4 13:16:02

el-table合并单元格

el-tabel数据结构此处为this.rolePermitItemList 合并后的样式： el-table-column 需要添加property字段，属性值同props，用来判断需要合并的字段 <el-table :data"rolePermitItemList" style"width: calc(100% );margi…...

编程日记 2023/8/4 13:15:01

html5设置不缓存

编程日记 2023/8/4 13:14:00

https://blog.csdn.net/yoonerloop/article/details/123241451 一、无参数的函数参数 1、回调 //定义 interface OnClickListener { fun onClick() } private fun setOnClickListener(listener: OnClickListener) { } //使用 setOnClickListener(object : OnClickLi…...

编程日记 2023/8/4 13:12:59

谈谈 Kafka 的幂等性 Producer

使用消息队列，我们肯定希望不丢消息，也就是消息队列组件，需要保证消息的可靠交付。消息交付的可靠性保障，有以下三种承诺： 最多一次（at most once）：消息可能会丢失，但绝…...

编程日记 2023/8/4 13:11:58

Doris(三)-集群部署3个FE+3个BE

前置 1）配置java环境 1st 解压jdk包 unzip jdk1.8.0_171-amd64.zip 2nd 配置环境变量 vim /etc/profile#文末添加JAVA_HOME/data/jdk1.8.0_171-amd64 PATH$JAVA_HOME/bin:$PATHexport PATH JAVA_HOME3rd 启用配置 source /etc/profile 4th 验证 java -versi…...

编程日记 2023/8/4 13:10:57

js沙箱逃逸

目录一、什么是沙箱(sandbox) 二、沙箱技术的实现 & node.js 2.1简单沙箱程序示例 2.2this.tostring S1： S2： 三、arguments.callee.caller 一、什么是沙箱(sandbox) 在计算机安全性方面，沙箱（沙盒、sanbox&#xff…...

编程日记 2023/8/4 13:09:55

振弦传感器信号转换器应用山体滑坡安全监测

振弦传感器信号转换器应用山体滑坡安全监测随着人类文明的进步，自然灾害对人们的生活和财产安全造成的威胁也越来越大。山体滑坡作为自然灾害中的一种，给人们的生活和财产安全带来了极大的威胁。因此，进行山体滑坡的安全监测显得尤为重要。振…...

编程日记 2023/8/4 13:08:54

Moonbeam新增强大的互操作性功能至波卡生态

波卡上的领先多链开发平台Moonbeam发布适用于平行链间活动的新版本互操作性功能。最新的链更新Runtime 2401，是自Moonbeam上线后的最大更新，其中包括三个针对开发者于链上的里程碑式更新： 用于访问消息传递功能的预编译智能合约从其他波卡平…...

编程日记 2023/8/4 13:07:53

考研408 | 【计算机网络】概述

计算机网络体系结构计算机网络概述：1.概念，组成，功能，分类2.标准化工作及相关组织3.性能指标体系结构&参考模型：1.分层结构2.协议，接口，服务3.ISO/OSI模型4.TCP/IP模型目录计算机网络体…...

编程日记 2023/8/4 13:06:48

一道名题-（csp 儒略日）的心得与技巧

这道题，我做了三年，平均每年做一次，我来讲讲我的心得。读题题面很长，细节很多，我们需要耐心细心的读，此时多花一点时间是划得来的。我们得出大致关系如下历法公历日常用历儒略历公元前公元后历法公历…...

编程日记 2023/8/4 13:05:46

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石，设计模式在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类：一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/6/16 20:30:40

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...

编程新知 2025/6/15 23:30:28

循环冗余码校验CRC码算法步骤+详细实例计算

通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）&#xff0…...

编程新知 2025/6/19 15:06:46

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/6/16 11:00:03

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/6/15 18:27:41

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/6/15 15:43:29

Java面试专项一-准备篇

一、企业简历筛选规则一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历例如：Boss直聘（招聘方平台） 直接按照条件进行筛选例如&#xff1a…...

编程新知 2025/6/19 12:35:20

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南：计算机基础与源码原理深度解析第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...

编程新知 2025/6/16 23:14:43

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/6/16 17:23:17

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录使用 erase 返回值继续迭代使用索引进行遍历我们知道类似 vector 的顺序迭代器被删除后，迭代器会失效，因为顺序迭代器在内存中是连续存储的，元素删除后，后续元素会前移。但一些场景中，我们又需要在执行删除操作…...

编程新知 2025/6/16 16:11:49

文章目录

一、基础选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

二、复合选择器

1.交集选择器

2.并集选择器

三、属性选择器

1.[属性]

2.[属性=属性值]

3.[属性^=属性值]

4.[属性$=属性值]

5.[属性*=属性值]

四、关系选择器

1.父亲>儿子

2.祖先 后代

3.兄+弟

4.兄~弟

五、伪类选择器

六、伪元素选择器

相关文章：

2.祖先后代