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

CSS中所有选择器详解

news 2026/2/11 2:01:21

文章目录

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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2026/2/8 20:42:53

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...

编程新知 2026/2/10 13:19:02

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎：品融电商，一站式全案代运营领跑者在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54