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

CSS中所有选择器详解

news 2025/12/15 17:14:52

文章目录

一、基础选择器
- 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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/12/13 3:53:51

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优）核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/12/14 19:22:07

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/12/12 16:39:33

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/14 16:14:14

跨链模式：多链互操作架构与性能扩展方案

跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层&#xf…...

编程新知 2025/12/13 5:40:35

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/11/1 8:36:48

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...

编程新知 2025/12/10 0:38:35

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。目录 …...

编程新知 2025/12/11 8:11:09

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/12/12 12:12:55

文章目录

一、基础选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

二、复合选择器

1.交集选择器

2.并集选择器

三、属性选择器

1.[属性]

2.[属性=属性值]

3.[属性^=属性值]

4.[属性$=属性值]

5.[属性*=属性值]

四、关系选择器

1.父亲>儿子

2.祖先 后代

3.兄+弟

4.兄~弟

五、伪类选择器

六、伪元素选择器

相关文章：

2.祖先后代