当前位置: 首页 > 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;以提高代码的可读性。注释在代码执行时…...

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

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

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...