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

CSS中所有选择器详解

news 2025/8/28 11:10:23

文章目录

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

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型：架构设计与关键步骤在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...

编程新知 2025/8/26 9:18:57

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

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

编程新知 2025/8/5 7:03:44

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/6/15 17:37:51

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/8/27 5:58:46

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...

编程新知 2025/8/22 3:26:43

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色&#xf…...

编程新知 2025/8/22 5:05:10

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2025/8/5 9:30:07

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。一、为何需要创建独立账号？ 最小权限原则&#xf…...

编程新知 2025/7/27 0:36:47

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。但如果操作不当，可能会引发短暂的服务发现问题。下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/8/13 21:32:37

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51

文章目录

一、基础选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

二、复合选择器

1.交集选择器

2.并集选择器

三、属性选择器

1.[属性]

2.[属性=属性值]

3.[属性^=属性值]

4.[属性$=属性值]

5.[属性*=属性值]

四、关系选择器

1.父亲>儿子

2.祖先 后代

3.兄+弟

4.兄~弟

五、伪类选择器

六、伪元素选择器

相关文章：

2.祖先后代