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

CSS 选择器简单回顾

引言

当我们探讨网页设计和开发时, CSS(层叠样式表) 无疑是一个不可或缺的技术, 它使我们能够精确控制网页的外观和布局, 为用户创造出独特的视觉体验、以及良好的交互体验!! 而一个完整的 CSS 规则则是由两个主要部分组成: 选择器和声明块

image

那么今天我们就来盘点下常见的几种选择器类型…

一、基本选择器

基本选择器也是平常最用到的几个选择器了

1.1 通配选择器

CSS 中, 一个星号 * 就是一个通配选择器, 它可以匹配任意类型的 HTML 元素, 又称之为 通配符

// 对所有元素生效
* {font-size: 14px;
}

补充: 这里其实不推荐使用通配选择器, 因为它是 性能最低的一个 CSS 选择器

1.2 类型选择器

CSS 类型选择器通过 html 节点名称匹配元素, 换句话说, 它将选中一个 html 文件中所有指定类型的元素

/* 对所有 <a> 元素 生效  */
a {color: red;
}

1.3 类选择器

CSS 类选择器将根据元素的 class 属性内容, 来匹配所以符合的节点

/* 对所有 class 包含 spacious 的元素生效 */
.spacious {margin: 2em;
}

1.4 ID 选择器

ID 选择器会根据该元素的 id 属性内容来匹配元素

/* 对所有 id 为 demo 的元素生效 */
#demo {border: red 2px solid;
}

1.5 属性选择器

CSS 属性选择器将匹配那些具有特定属性或属性值的元素, 具体的语法规则如下:

语法描述
[attr]表示带有以 attr 命名的属性的元素
[attr=value]表示带有以 attr 命名的属性, 且属性值为 value 的元素
[attr*=value]表示带有以 attr 命名的属性, 且属性值含有 value 值的元素
[attr~=value]表示带有以 attr 命名的属性的元素, 并且该属性是一个以 空格分隔 的列表值, 同时其中至少有一个值为 value
`[attr=value]`
[attr^=value]表示带有以 attr 命名的属性, 且属性值是以 value 开头的元素
[attr$=value]表示带有以 attr 命名的属性, 且属性值是以 value 结尾的元素
[attr operator value i]在右方括号前添加一个用空格隔开的字母 i, 表示在匹配属性值时忽略大小写
[attr operator value s]在右方括号前添加一个用空格隔开的字母 s, 表示在匹配属性值时区分大小写
/* 以 "#" 开头的页面内部链接 */
a[href^="#"] {background-color: gold;
}/* 包含 "example" 的链接 */
a[href*="example"] {background-color: silver;
}/* 包含 "insensitive" 的链接, 不区分大小写 */
a[href*="insensitive" i] {color: cyan;
}/* 包含 "cAsE" 的链接, 区分大小写 */
a[href*="cAsE" s] {color: pink;
}/* 以 ".org" 结尾的链接 */
a[href$=".org"] {color: red;
}/* 以 "https" 开始, ".org" 结尾的链接 */
a[href^="https"][href$=".org"] {color: green;
}

1.6 并集选择器(分组选择器、选择器列表)

CSS 并集选择器通过 逗号 (,)分隔的多个选择器, 将选中所有符合选择器规则的元素

/* 对所有 span 和 div 生效 */
span,
div {border: red 2px solid;
}/* 对所有 class 包含 span 以及 id 等于 roor 的元素生效 */
.body,
#roor {border: red 2px solid;
}

1.7 交集选择器

CSS 交集选择器, 写法很简单只需要将多个选择器写一起即可(没有任何分隔符噢), 它将匹配同时满足多个选择器的元素

/* 匹配到所有 class 包含 slideshow 的 img 元素 */
img. {margin: 2em;
}

二、关系选择器

2.1 后代组合器

使用后代组合器(用单个空格 " " 字符表示)来组合了两个选择器, 它匹配到的元素满足条件: 自身能够被第二个选择器匹配, 同时存在祖先元素满足第一个选择器

/* 先匹配到所有 li 元素, 然后过滤出 「祖先元素能够被 ul.my-things 选择器匹配」的 li 元素 */
ul.my-things li {margin: 2em;
}

2.2 子组合器

子组合器 > 被放在两个 CSS 选择器之间, 它匹配到的元素满足条件: 自身能够被第二个选择器匹配, 同时父元素能够满足第一个选择器匹配

/* 先匹配到所有 li 元素, 然后过滤出「父元素能够被 ul.my-things 选择器匹配」的 li 元素 */
ul.my-things > li {margin: 2em;
}

2.3 兄弟元素选择器

兄弟元素选择器 ~ 介于两个选择器之间, 它匹配到的元素满足条件: 自身能够被第二选择器匹配, 并且它 上面 存在某个兄弟节点满足第一个选择器

/* 在任意图像后的兄弟段落 */
img ~ p {color: red;
}

2.4 相邻兄弟组合器

相邻兄弟选择器 + 介于两个选择器之间, 它匹配到的元素满足条件: 自身能够被第二选择器匹配, 并且它 上一个兄弟节点 刚好能够被第一个选择器匹配到

/* 匹配到紧跟在 img 后面的 p */
img + p {font-weight: bold;
}

三、伪类

何为 伪类, 其实就是用于匹配元素的某些特定的 状态, 例如 :hover 伪类, 就可匹配到鼠标 hover(悬停) 到元素的一个状态, 如下代码则会匹配到鼠标 hover(悬停)到 img 的状态

/* 鼠标 hover 到图片 */
img:hover {width: 110%;
}

下图是常见的一些 伪类, 更多详见 CSS/Pseudo-classes

image

四、伪元素

伪元素与伪类不同, 因为它们不是响应平台状态, 而是像使用 CSS 插入新元素一样! 例如我们可以通过 ::before 在元素最开始位置插入节点

.item::before {content: '';display: block;width: 10px;height: 10px;background-color: red;
}

下图是常见的一些 伪元素, 更多详见 CSS/Pseudo-elements

image

五、补充

  1. CSS 选择器匹配规则: CSS 选择器的读取顺序是从右向左, 例如 #markdown .content h3 会先找到所有 h3 标签元素, 然后过滤掉祖先不是 .content 的元素, 最后再过滤掉祖先不是 #markdown 的元素; 所以为了性能我们一般不建议 CSS 选择器层级太深;

  2. 在语法上, 伪类为啥使用 : 伪元素则使用 ::, 其实主要目的还是区分它们两, 但由于旧版本的 CSS 规范中不存在这种区别, 因此浏览器支持伪元素使用单个冒号 :, 例如 :before:after 以帮助向后兼容旧浏览器

  3. 内容篇幅问题: 原本计划是将所有选择器相关内容, 简单梳理清楚, 写到后面发现内容有点过 😭😭😭!! 关于伪类伪元素后面空了分模块单独介绍吧!!!

六、参考

  • MDN - CSS 选择器

image

相关文章:

CSS 选择器简单回顾

引言 当我们探讨网页设计和开发时, CSS(层叠样式表) 无疑是一个不可或缺的技术, 它使我们能够精确控制网页的外观和布局, 为用户创造出独特的视觉体验、以及良好的交互体验!! 而一个完整的 CSS 规则则是由两个主要部分组成: 选择器和声明块 那么今天我们就来盘点下常见的几种选…...

uniapp配置微信小程序分包(分包优化)

1.manifest.json中 源码视图中找到mp-weixin&#xff0c;新增代码"optimization":{"subPackages":true}&#xff0c;如下图所示 "optimization" : {"subPackages" : true } 2.pages.json中 分包内静态文件示例 "subPackages&…...

MySQL-10.DML-添加数据insert

一.DML(INSERT) -- DDL&#xff1a;数据操作语言 -- DML&#xff1a;插入数据 - insert -- 1.为tb_emp表的username&#xff0c;name&#xff0c;gender字段插入值 insert into tb_emp (username,name,gender) values (wuji,无忌,1); -- 这样会报错&#xff0c;因为create_ti…...

ARM/Linux嵌入式面经(四八):tp-link联洲国际

文章目录 1. **模电基础**:请解释共射电路的工作原理,并描述如何计算其放大倍数。工作原理放大倍数计算面试官追问及回答2. **DCDC损耗**:有哪些方法可以降低DCDC转换器的损耗?3. **示波器使用**:如何用示波器正确测量DCDC的开关纹波?4. **IIC通信**:IIC通信协议中是否需…...

代码实践篇四 形状检测与规则重建

本节内容主要涉及形状检测&#xff08;Shape Detection&#xff09;与形状重建&#xff08;Shape Reconstruction&#xff09;&#xff0c;具体算法步骤会在后续章节介绍。CGAL在6.0重点更新了形状重建部分的一些模块——动态空间分割与动态形状重建等&#xff0c;也会在后续详…...

JVM(HotSpot):GC之垃圾回收阶段

文章目录 前言一、标记清除算法(Mark Sweep)二、标记整理算法(Mark Compact)三、复制算法(Copy) 前言 标记出垃圾对象之后&#xff0c;就要进行清理。 那么&#xff0c;如何清理&#xff1f; 这里也有相应的算法。 主要有三种。 一、标记清除算法(Mark Sweep) 原理说明&…...

Go 项目如何集成类似mybatisPlus插件呢?GORM走起!!

导读&#xff1a; 在 Go 项目中&#xff0c;虽然没有像 MyBatis Plus 这样特定的 ORM 插件&#xff0c;但可以使用功能相似的 Go ORM 框架&#xff0c;比如 GORM&#xff0c;它支持链式查询、自动迁移、预加载等功能&#xff0c;与 MyBatis Plus 有相似之处。通过一些插件或扩…...

《深度学习》Dlib库 CNN卷积神经网络 人脸识别

目录 一、如何实现CNN人脸识别 1、CNN核心概念 1&#xff09;卷积层 2&#xff09;池化层 3&#xff09;激活函数 4&#xff09;全连接层 2、步骤 1&#xff09;加载预训练的人脸识别模型 2&#xff09;读取图像并检测人脸 3&#xff09;提取人脸特征向量 4&#xf…...

滚雪球学Redis[7.1讲]:Redis实战案例

全文目录&#xff1a; &#x1f389;前言&#x1f6a6;1. 使用Redis实现会话管理在Web应用中使用Redis管理会话会话过期与刷新策略安全性考虑与优化 &#x1f9e9;2. 使用Redis实现缓存系统缓存的基本原理Redis缓存的应用场景缓存失效策略与雪崩预防 ✨3. Redis在排行榜系统中的…...

WordPress外部图片本地化插件

一款用于本地化文章的外部图片的插件&#xff0c;支持如下功能&#xff1a; 文章发布前通过编辑器插件本地化 文章手动发布时自动本地化 文章定时发布时自动本地化 针对已发布的文章批量本地化。 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/898963…...

Linux基础-shell的简单实现

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Linux基础-shell的简单实现 收录于专栏[Linux学习] 本专栏旨在分享学习Linux的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1, 全局变…...

Tomcat日志文件详解及catalina.out日志清理方法

目录 前言1. Tomcat日志文件详解1.1 catalina.out1.2 localhost_access_log1.3 catalina.<date>.log1.4 host-manager.<date>.log 和 manager.<date>.log1.5 localhost.<date>.log 2. catalina.out文件管理与清理方法2.1 为什么不能直接删除catalina.o…...

react 中的hooks中的useState

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作 (2). 语法: const [xxx, setXxx] React.useState(initValue) (3). useState()说明:参数: 第一次初始化指定的值在内部作缓存返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的…...

STM32学习笔记---DMA

目录 一、什么是DMA 1、DMA是什么 2、DMA的工作流程 3、DMA控制器与外设控制器 二、如何配置DMA 1、DMA框图 2、功能说明 2.1 通道选择 2.2 仲裁器 2.3 源、目标和传输模式 2.4 指针递增 2.5 循环模式 2.6 DMA流控制器和外设流控制器 3、程序设计 三、具体使用DMA…...

Cesium 实战 - 自定义纹理材质 - 立体墙(旋转材质)

Cesium 实战 - 自定义纹理材质 - 立体墙(旋转材质) 核心代码完整代码在线示例Cesium 给实体对象(Entity)提供了很多实用的样式,基本满足普通项目需求; 但是作为 WebGL 引擎,肯定不够丰富,尤其是动态效果样式。 对于实体对象(Entity),可以通过自定义材质,实现各种…...

进程间关系与守护进程

一、进程组 1.1、什么是进程组 提到进程的概念&#xff0c; 其实每一个进程除了有一个进程 ID(PID)之外 还属于一 个进程组。进程组是一个或者多个进程的集合&#xff0c; 一个进程组可以包含多个进程。 每一 个进程组也有一个唯一的进程组 ID(PGID)&#xff0c; 并且这个 PG…...

金山翻译接口逆向

网址&#xff08;加密后&#xff09;&#xff1a;aHR0cHM6Ly93d3cuaWNpYmEuY29tL3RyYW5zbGF0ZQ 文章目录 抓包sign值结果加密 逆向sign值第一步第二步1.2.3. 解密content第一步1.2.3. 抓包 F12 -> 翻译框输入spider -> 点击Fetch/XHR -> 找到接口 index.php? 开头的…...

unified-runtime编译与验证

unified-runtime编译与验证 一.创建容器二.编译unified-runtime三.生成一个cuda ptx kernel四.API测试 unified-runtime编译与验证 一.创建容器 docker run --gpus all --shm-size32g -ti \-e NVIDIA_VISIBLE_DEVICESall --privileged --nethost \--rm -it \-v $PWD:/home \-…...

【Python】最详细--基础语法

Python是一种强大且易于学习的编程语言&#xff0c;广泛用于各种应用程序的开发&#xff0c;如web开发、数据科学、人工智能等。以下是一些Python的基础知识&#xff1a; 1. Python的注释 Python的注释用于在代码中添加说明&#xff0c;以提高代码的可读性。注释在代码执行时…...

二叉树基础:什么样的二叉树适合用数组来存储?

二叉树基础:什么样的二叉树适合用数组来存储? 在计算机科学中,二叉树是一种非常重要的数据结构。它具有许多应用,如搜索、排序、表达式解析等。在存储二叉树时,我们可以使用多种方法,其中一种是使用数组。但是,并不是所有的二叉树都适合用数组来存储。那么,什么样的二…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...