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

CSS中所有选择器详解

news 2026/2/10 21:08:39

文章目录

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

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...

编程新知 2025/11/28 2:51:33

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形总结前言学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...

编程新知 2026/2/8 18:25:56

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

基于Docker Compose部署Java微服务项目

一. 创建根项目根项目（父项目）主要用于依赖管理一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/2/5 3:09:56

Rust 异步编程

Rust 异步编程引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。异步编程基础什么是异步…...

编程新知 2025/11/17 18:58:56

uniapp 小程序学习（一）

利用Hbuilder 创建项目运行到内置浏览器看效果下载微信小程序安装到Hbuilder 下载地址 ：开发者工具默认安装设置服务端口号在Hbuilder中设置微信小程序配置找到运行设置，将微信开发者工具放入到Hbuilder中， 打开后出现如下 bug 解…...

编程新知 2026/2/5 4:29:00

Oracle11g安装包

Oracle 11g安装包适用于windows系统，64位下载路径 oracle 11g 安装包...

编程新知 2025/9/13 16:14:04

「Java基本语法」变量的使用

变量定义变量是程序中存储数据的容器，用于保存可变的数据值。在Java中，变量必须先声明后使用，声明时需指定变量的数据类型和变量名。语法数据类型变量名 [ 初始值]; 示例：声明与初始化 public class VariableDemo {publi…...

编程新知 2025/11/19 17:35:31

STL 2迭代器

文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器？ 1.迭代器…...

编程新知 2025/10/2 23:42:13

文章目录

一、基础选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

二、复合选择器

1.交集选择器

2.并集选择器

三、属性选择器

1.[属性]

2.[属性=属性值]

3.[属性^=属性值]

4.[属性$=属性值]

5.[属性*=属性值]

四、关系选择器

1.父亲>儿子

2.祖先 后代

3.兄+弟

4.兄~弟

五、伪类选择器

六、伪元素选择器

相关文章：

2.祖先后代