css3新增选择器总结
目录
一、属性选择器
二、结构伪类选择器
三、伪元素选择器
四、UI状态伪类选择器
五、反选伪类选择器
六、target选择器
七、父亲选择器、后代选择器
八、相邻兄弟选择器、兄弟们选择器
一、属性选择器
(除IE6外的大部分浏览器支持)
E:某个标签元素如div,arr:该元素的某个属性:
| 选择器 | 解释 | 例子 |
| E[arr^='value'] | 选中属性以‘value’开头的E元素 | ![]() ![]() |
| E[arr$='value'] | 选中属性以value结尾的E元素 | ![]() ![]() |
| E[arr*='value'] | 选中属性包含value的E元素 | ![]() ![]() |
补充:
1、E:root——匹配文档的根元素,对于HTML文档,就是HTML元素
2、E:empty——匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
二、结构伪类选择器
(FireFox 1.5/2.0/3.0 支持E:root,FireFox 3.0支持E:last-child、E:empty,IE6/7/8不支持)
| 选择器 | 解释 | 示例 |
| E:first-child | 父元素下第一个子元素 | ![]() |
| E:last-child | 父元素下最后一个子元素 | 略 |
| E:nth-child(n) | 父元素下第n个子元素 | 略 |
| E:nth-child(even) | 父元素下第偶数个子元素 | ![]() ![]() |
| E:nth-child(odd) | 父元素下第奇数个子元素 | 略 |
| E:nth-child(公式) | 父元素下第公式所指的每一个子元素 | 略 |
| E:first-of-type、last-of-type | 父元素下第一个E元素、父元素下最后一个E元素 | ![]() |
| E:nth-of-type(n)、nth-of-type(公式) | 父元素下第n个E元素、父元素下第公式所指的每一个E元素 | ![]() |
| E:nth-of-type(even) | 父元素下第偶数个E元素 | ![]() ![]() |
| E:nth-of-type(odd) | 父元素下第奇数个E元素 | 略 |
| E:nth-child和E:nth-of-type区别 | 1、E:nth-child(n)的对象是E元素下的所有子元素;而nth-of-type(n)的对象指父元素下所有E元素; 2、E:nth-child(n)不一定渲染,当第n个元素不是E时,样式无法渲染;nth-of-type(n)一定渲染 | ![]() ![]() |
三、伪元素选择器
顾名思义,假的元素,主要是说E::before可以在E元素前面加一个伪元素,E::after可以在E元素后面加一个伪元素。
| 选择器 | 解释 | 示例 |
| E::before | 用来实现在元素内容之前插入内容 |
|
| E::after | 用来实现在元素内容后面插入内容 | 略 |
| E::first-letter | 为E元素文本中的首个字母或文字添加样式 | ![]() ![]() |
| E::first-line | 用来实现向文本的首行添加样式 | 略 |
四、UI状态伪类选择器
| 选择器 | 解释 | 示例 |
| E:enabled | 匹配表单中激活的元素 | ![]() |
| E:disabled | 匹配表单中禁用的元素 | ![]() |
| E:checked | 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素 | ![]() |
| E::selection | 匹配用户当前选中的元素(鼠标在浏览器上选中的文字内容,本来是淡蓝色,通过E::selection,赋予了新的选中样式) | ![]() ![]() |
五、反选伪类选择器
| 选择器 | 解释 | 示例 |
| E:not(s) | 匹配E选择器中,不是s的所有E选择器 | ![]() ![]() |
六、target选择器
| 选择器 | 解释 | 示例 |
| E:target | 匹配文档中特定"id"点击后的效果 | ![]() ![]() |
七、父亲选择器、后代选择器
| 选择器 | 解释 | 示例 |
| 父亲选择器div>p{...} | E元素的子元素 | ![]() ![]() |
| 后代选择器div p{...} | E元素的子元素以及孙子元素等所有的后代元素 | ![]() ![]() |
八、相邻兄弟选择器、兄弟们选择器
| 选择器 | 解释 | 示例 |
| 相邻兄弟选择器:E+F | 匹配最邻近的兄弟元素 | ![]() ![]() |
| 兄弟们选择器:E ~ F | 匹配任何在E元素之后的同级F元素 |
|
十、最后
欢迎评论区纠错或者补充哦。
相关文章:
css3新增选择器总结
目录 一、属性选择器 二、结构伪类选择器 三、伪元素选择器 四、UI状态伪类选择器 五、反选伪类选择器 六、target选择器 七、父亲选择器、后代选择器 八、相邻兄弟选择器、兄弟们选择器 一、属性选择器 (除IE6外的大部分浏览器支持) E&#…...
0基础学C#笔记10:归并排序法
文章目录 前言一、递归的方式二、代码总结 前言 将一个大的无序数组有序,我们可以把大的数组分成两个,然后对这两个数组分别进行排序,之后在把这两个数组合并成一个有序的数组。由于两个小的数组都是有序的,所以在合并的时候是很…...
nlohmann json:通过for遍历object和array
object和array可以使用数for进行遍历: #include <iostream> #include <nlohmann/json.hpp> using namespace std; using json = nlohmann::json;auto checkJsonType(json& x) {if(x.type() == json::value_t::null){cout<<x<<" is null&quo…...
适配器模式:将不兼容的接口转换为可兼容的接口
适配器模式:将不兼容的接口转换为可兼容的接口 什么是适配器模式? 适配器模式是一种结构型设计模式,用于将一个类的接口转换为客户端所期望的另一个接口。它允许不兼容的类能够合作,使得原本由于接口不匹配而无法工作的类能够一…...
【量化课程】07_量化回测
文章目录 7.1 pandas计算策略评估指标数据准备净值曲线年化收益率波动率最大回撤Alpha系数和Beta系数夏普比率信息比率 7.2 聚宽平台量化回测实践平台介绍策略实现 7.3 Backtrader平台量化回测实践Backtrader简介Backtrader量化回测框架实践 7.4 BigQuant量化框架实战BigQuant简…...
竞赛项目 深度学习花卉识别 - python 机器视觉 opencv
文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 &a…...
用对角线去遍历矩阵
声明 该系列文章仅仅展示个人的解题思路和分析过程,并非一定是优质题解,重要的是通过分析和解决问题能让我们逐渐熟练和成长,从新手到大佬离不开一个磨练的过程,加油! 原题链接 用对角线遍历矩阵https://leetcode.c…...
【vue】点击按钮弹出卡片,点击卡片中的取消按钮取消弹出的卡片(附代码)
实现思路: 在按钮上绑定一个点击事件,默认是true;在export default { }中注册变量给卡片标签用v-if判断是否要显示卡片,ture则显示;在卡片里面写好你想要展示的数据;给卡片添加一个取消按钮,绑…...
【K8S】pod 基础概念讲解
目录 Pod基础概念:在Kubrenetes集群中Pod有如下两种使用方式:pause容器使得Pod中的所有容器可以共享两种资源:网络和存储。总结:kubernetes中的pause容器主要为每个容器提供以下功能:Kubernetes设计这样的Pod概念和特殊…...
ASP.NET Core中间件记录管道图和内置中间件
管道记录 下图显示了 ASP.NET Core MVC 和 Razor Pages 应用程序的完整请求处理管道 中间件组件在文件中添加的顺序Program.cs定义了请求时调用中间件组件的顺序以及响应的相反顺序。该顺序对于安全性、性能和功能至关重要。 内置中间件记录 内置中间件原文翻译MiddlewareDe…...
[系统安全] 五十二.DataCon竞赛 (1)2020年Coremail钓鱼邮件识别及分类详解
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列。因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全、逆向分析和恶意代码检测,“系统安全”系列文章会更加聚焦,更加系…...
Android学习之路(3) 布局
线性布局LinearLayout 前几个小节的例程中,XML文件用到了LinearLayout布局,它的学名为线性布局。顾名思义,线性布局 像是用一根线把它的内部视图串起来,故而内部视图之间的排列顺序是固定的,要么从左到右排列…...
Python实现GA遗传算法优化XGBoost回归模型(XGBRegressor算法)项目实战
说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 遗传算法(Genetic Algorithm,GA)最早是由美国的 John holland于20世…...
C#软件外包开发流程
C# 是一种由微软开发的多范式编程语言,常用于开发各种类型的应用程序,从桌面应用程序到移动应用程序和Web应用程序。下面和大家分享 C# 编程学习流程,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司&#…...
队列的实现
1.队列的概念 队列:只允许在一端进行插入数据操作,在另一端进行删除数据操作的特殊线性表,队列具有先进先出FIFO(First In First Out)。 入队列:进行插入操作的一端称为队尾 出队列:进行删除操作的一端称为队头 2.队列…...
Node + Express 后台开发 —— 起步
Node Express 后台开发 —— 起步 前面陆续学习了一下 node、npm、模块,也稍尝试 Express,感觉得换一个思路加快进行。 比如笔者对前端的开发已较熟悉,如果领导给一个内部小网站的需求,难道说你得给我配置一个后端?…...
Python学习笔记第五十七天(Pandas 数据清洗)
Python学习笔记第五十七天 Pandas 数据清洗Pandas 清洗空值isnull() Pandas替换单元格mean()median()mode() Pandas 清洗格式错误数据Pandas 清洗错误数据Pandas 清洗重复数据duplicated()drop_duplicates() 后记 Pandas 数据清洗 数据清洗是对一些没有用的数据进行处理的过程…...
Elasticsearch的一些基本概念
文章目录 基本概念:文档和索引JSON文档元数据索引REST API 节点和集群节点Master eligible节点和Master节点Data Node 和 Coordinating Node其它节点 分片(Primary Shard & Replica Shard)分片的设定操作命令 基本概念:文档和索引 Elasticsearch是面…...
Guitar Pro8专业版吉他学习、绘谱、创作软件
Guitar Pro 8 专业版更强大!更优雅!更完美!Guitar Pro 8.0 五年磨一剑!多达30项功能优化!Guitar Pro8 版本一共更新近30项功能,令吉他打谱更出色!Guitar Pro8 是自2017年4月发布7.0之后发布的最…...
SpringBoot复习(39)Servlet容器的自动配置原理
Servlet容器自动配置类为ServletWebServerFactoryAutoConfiguration 可以看到通过Import注解导入了三个配置类: 通过这个这三个配置类可以看出,它们都使用了ConditionalOnClass注解,当类路径存在tomcat相关的类时,会配置一个T…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言:多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时,基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套:跨云网络构建数据…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)
引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域,专业机构的核心价值不仅在于减轻债务数字,更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明,合法债务优化需同步实现三重平衡: 法律刚性(债…...





































