CSS中所有选择器详解
文章目录
- 一、基础选择器
- 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.兄~弟 五、伪类选择…...
STM32 低功耗学习
STM32 电源系统结构介绍 电源系统:VDDA供电区域、VDD供电区域、1.8V供电区域、后备供电区域。 器件的工作电压(VDD)2.0~3.6V 为了提高转换精度,给模拟外设独立供电。电压调节器为1.8V供电区域供电,且1.8V供电区域是电…...
HCIP--云计算题库 V5.0版本
在国家政策的支持下,我国云计算应用市场发展明显加快,越来越多的企业开始介入云产业,出现了大量的应用解决方案,云应用的成功案例逐渐丰富,用户了解和认可程度不断提高,云计算产业发展迎来了“黄金机遇期”…...
小白到运维工程师自学之路 第六十五集 (docker-compose)
一、概述 Docker Compose 的前身是 Fig,它是一个定义及运行多个 Docker 容器的工具。可以使用YAML文件来配置应用程序的服务。然后,使用单个命令,您可以创建并启动配置中的所有服务。Docker Compose 会通过解析容器间的依赖关系(…...
量子机器学习
量子机器学习(QML)是结合量子计算和机器学习的交叉领域,旨在利用量子计算的优势来改进机器学习算法的性能。下面是一些有关量子机器学习的学习资源和技术应用: 学术论文和研究资料: ArXiv.org:在ArXiv的量子物理和机器学习类别中&…...
WEB集群——tomcat
1. 简述静态网页和动态网页的区别。 2. 简述 Webl.0 和 Web2.0 的区别。 3. 安装tomcat8,配置服务启动脚本,部署jpress应用。 一、简述静态网页和动态网页的区别 (1)静态网页 1.什么是静态网页 请求响应信息,发…...
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…...
老版MFC工程迁移到VC2019编译EXE太大的问题
有个老版静态链接MFC库的MFC程序需要迁移到VC2019编译,直接用VC2019打开就会自动迁移过去,然后编译一下,生成的EXE大小将近3MB,老版的工程编译出来也就600多KB。 肯定哪里不对劲! 好一顿研究之后发现原来默认会把MFC…...
Curve深陷安全事件,OKLink如何破局
出品|欧科云链研究院 作者|Matthew Lee 7月31号,Curve 在平台表示 Vyper 0.2.15 的稳定币池由于编译器的漏洞所以遭到攻击。具体因为重入锁功能的失效,所以黑客可以轻易发动重入攻击,即允许攻击者在单次交易中执行某…...
2023华数杯数学建模思路A题B题C题模型代码分析
目录 一.2023华数杯数学建模最新思路:比赛开始后第一时间更新 更新查看文末名片 二.往年华数杯赛题简介分析: 一.2023华数杯数学建模最新思路:比赛开始后第一时间更新 更新查看文末名片 二.往年华数杯赛题简介分析: 2022华数杯…...
el-table合并单元格
el-tabel数据结构 此处为this.rolePermitItemList 合并后的样式: el-table-column 需要添加property字段,属性值同props,用来判断需要合并的字段 <el-table :data"rolePermitItemList" style"width: calc(100% );margi…...
html5设置不缓存
<meta http-equiv"Cache-Control" content"no-cache, no-store, must-revalidate"> <meta http-equiv"Pragma" content"no-cache"> <meta http-equiv"Expires" content"0"> 使用meta元素的htt…...
kotlin 的函数参数
https://blog.csdn.net/yoonerloop/article/details/123241451 一、无参数的函数参数 1、回调 //定义 interface OnClickListener { fun onClick() } private fun setOnClickListener(listener: OnClickListener) { } //使用 setOnClickListener(object : OnClickLi…...
谈谈 Kafka 的幂等性 Producer
使用消息队列,我们肯定希望不丢消息,也就是消息队列组件,需要保证消息的可靠交付。消息交付的可靠性保障,有以下三种承诺: 最多一次(at most once):消息可能会丢失,但绝…...
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…...
js沙箱逃逸
目录 一、什么是沙箱(sandbox) 二、沙箱技术的实现 & node.js 2.1简单沙箱程序示例 2.2this.tostring S1: S2: 三、arguments.callee.caller 一、什么是沙箱(sandbox) 在计算机安全性方面,沙箱(沙盒、sanboxÿ…...
振弦传感器信号转换器应用山体滑坡安全监测
振弦传感器信号转换器应用山体滑坡安全监测 随着人类文明的进步,自然灾害对人们的生活和财产安全造成的威胁也越来越大。山体滑坡作为自然灾害中的一种,给人们的生活和财产安全带来了极大的威胁。因此,进行山体滑坡的安全监测显得尤为重要。振…...
Moonbeam新增强大的互操作性功能至波卡生态
波卡上的领先多链开发平台Moonbeam发布适用于平行链间活动的新版本互操作性功能。最新的链更新Runtime 2401,是自Moonbeam上线后的最大更新,其中包括三个针对开发者于链上的里程碑式更新: 用于访问消息传递功能的预编译智能合约从其他波卡平…...
考研408 | 【计算机网络】概述
计算机网络体系结构 计算机网络概述:1.概念,组成,功能,分类2.标准化工作及相关组织3.性能指标体系结构&参考模型:1.分层结构2.协议,接口,服务3.ISO/OSI模型4.TCP/IP模型 目录 计算机网络体…...
一道名题-(csp 儒略日)的心得与技巧
这道题,我做了三年,平均每年做一次,我来讲讲我的心得。 读题 题面很长,细节很多,我们需要耐心细心的读,此时多花一点时间是划得来的。 我们得出大致关系如下 历法公历日常用历儒略历公元前公元后历法公历…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要: 近期,在使用较新版本的OpenSSH客户端连接老旧SSH服务器时,会遇到 "no matching key exchange method found", "n…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...
Python 高效图像帧提取与视频编码:实战指南
Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...
深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙
WebGL:在浏览器中解锁3D世界的魔法钥匙 引言:网页的边界正在消失 在数字化浪潮的推动下,网页早已不再是静态信息的展示窗口。如今,我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室,甚至沉浸式的V…...
大数据驱动企业决策智能化的路径与实践
📝个人主页🌹:慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言:数据驱动的企业竞争力重构 在这个瞬息万变的商业时代,“快者胜”的竞争逻辑愈发明显。企业如何在复杂环…...
