CSS技巧::is()、 :where()、:has()伪元素的运用

:is()、:where() 和 :has() 伪元素是 CSS 中用于样式化元素的非常强大的工具。是在 CSS 选择器 Level 4 规范中引入的。允许将样式应用于符合特定条件的任何元素,例如元素的类型、元素的位置和元素的后代。

:is()

:is() 伪类可以用于基于选择器的组合来定位元素。它将一系列选择器作为其参数,并在元素匹配任何选择器时返回 true。

div:is(.isPink, .isPretty) {color: pink;
}<div class="isPink"><p>Pink</p>
</div><div class="isPretty"><p>Pretty</p>
</div><div><span>Not Pretty</span>
</div>

:where()

:where() 伪类可以根据条件来定位元素。它以条件作为参数,并在元素匹配条件时返回 true。
例如,如果想要定位所有类名以 bold 开头的元素,可以使用 :where()伪类来实现:
将以下伪类添加到上述CSS文件中,将导致任何具有以 bold 开头的CSS类的子元素渲染为粗体。

div:where([class^="bold"]) {font-weight: bold;
}
<div class="isPink"><p>Pink</p>
</div><div  class="bold_text isPretty"><p>Pretty</p>
</div>

伪元素 :is() 和 :where() 看起来在做同样的事情。但是,伪元素 :is() 用于根据选择器列表匹配元素,而伪元素 :where() 则用于根据条件匹配元素。

:has()

:has() 伪类可以用于基于后代元素来定位元素。它以选择器作为参数,并在元素具有与选择器匹配的后代时返回 true。
例如,如果想要定位所有包含元素的元素,可以使用 :has() 伪类来实现。

div:has(p) {background-color: purple !important;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/8823.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

08.计算机网络——其他重要协议和技术

文章目录 DNSICMPNAT代理服务器 DNS DNS是一整套从域名映射到IP的系统 ​ TCP/IP中使用IP地址和端口号来确定网络上的一台主机的一个程序&#xff0c;但是IP地址不方便记忆&#xff0c;于是人们发明域名&#xff0c;其本质是一个字符串&#xff0c;映射了它和IP地址的关系。 …

【Docker】Docker的数据管理和网络通信

Docker的数据管理和网络通信 一、Docker 的数据管理1. 数据卷2. 数据卷容器二、容器互联(使用centos镜像)三、 Docker 镜像的创建1. 基于己有镜像创建2. 基于本地模板创建3. 基于 Dockerfile 创建3.1 联合文件系统3.2 镜像加载原理3.3 为什么Docker里的centos的大小才200M?3…

zookeeper的核心概念

核心 集群角色 简介 通常在分布式系统中&#xff0c;构成一个集群的每一台机器都有自己的角色&#xff0c;最典型的集群模式就是Master/Slave模式&#xff08;主备模式) 在这种模式中&#xff0c;我们把能够处理所有写操作的机器称为Master机器&#xff0c;把所有通过异步复制…

【iOS】—— RunLoop和多线程相关问题总结

RunLoop 1. 讲讲RunLoop&#xff0c;项目中有用到过吗&#xff1f; RunLoop 的基本作用&#xff1a;保持程序的持续运行&#xff0c;节省 CPU 的资源&#xff0c;提高程序的性能 &#xff08; 没有事情&#xff0c;就请休眠&#xff0c;不要功耗。有事情&#xff0c;就处理&a…

【JavaSE】运算符

【本节目标】 1. 熟练掌握各种运算符 这部分内容和C语言的位运算相似&#xff0c;可以参考这篇文章&#xff1a;【C语言】操作符详解 目录 1. 什么是运算符 2. 算术运算符 3. 关系运算符 4. 逻辑运算符 5. 位运算符 6. 移位运算(了解) 7. 条件运算符 1. 什么是运算符 …

SQL 简介

SQL 简介 简介 SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于管理和操作关系型数据库的标准化语言。它允许用户通过使用各种指令来创建、修改和查询数据库中的数据。 SQL具有几个主要组成部分&#xff1a; 数据定义语言&#…

day31贪心算法 用最少数量的箭引爆气球 和无重叠区间

题目描述 题目分析&#xff1a; x轴向上射箭&#xff0c;12一支&#xff0c;重叠的需要一支&#xff0c;3-8一支&#xff0c;7-16一支 返回2&#xff1b; 就是让重叠的气球尽量在一起&#xff0c;局部最优&#xff1b;用一支弓箭&#xff0c;全局最优就是最少弓箭&#xff1b…

机器学习前言

1.机器学习和统计学关系 2.机器学习的发展 3.机器学习与深度学习的相同点与不同点 4.机器学习和深度学习优缺点 一、机器学习和统计学关系 机器学习和统计学密切相关&#xff0c;可以说机器学习是统计学在计算机科学和人工智能领域的应用。机器学习和统计学在方法论和技术上有…

科技的成就(四十八)

373、新的编程语言 Swift 2014 年 6 月 2 日&#xff0c;苹果在 WWDC 上发布了新的编程语言 Swift。Swift 由克里斯拉特纳在苹果内部主持开发&#xff0c;历时 4 年。它是一种支持多编程范式的可编译语言&#xff0c;其设计简单、高效、安全&#xff0c;用来开发 macOS/OS X、i…

合宙Air724UG LuatOS-Air script lib API--ftp

Table of Contents ftp ftp.command(command, timeout) ftp.pasv_connect(timeout) (local函数 无法被外部调用) ftp.login(ftp_mode, host, port, username, password, timeout, ssl, cert) ftp.upload(remote_file, local_file, timeout) ftp.download(remote_file, local_fi…

SQL ORDER BY 关键字

ORDER BY 关键字用于对结果集进行排序。 ORDER BY 关键字用于对结果集按照一个列或者多个列进行排序。 ORDER BY 关键字默认按照升序对记录进行排序。如果需要按照降序对记录进行排序&#xff0c;您可以使用 DESC 关键字。 ORDER BY 子句后面的列名指示按哪些列进行排序。如…

如何才能做Cox呢?今天带来Cox回归分析步骤详解

Cox回归是生存分析中运用最多的一个模型&#xff0c;又称为比例风险回归模型(proportional hazards model)。是由英国统计学家D.R.Cox在1962年提出的&#xff0c;为了表示对他的尊敬&#xff0c;所以大家以他的名字命名这个模型。这是一种半参数回归模型&#xff0c;以结局和生…

数据结构【绪论】

数据结构入门级 第一章绪论 什么是数据结构&#xff1f;什么是数据类型&#xff1f; 程序数据结构算法 一、基本概念&#xff1a; 数据&#xff1a;指所有能被计算机处理的&#xff0c;无论图、文字、符号等。数据元素&#xff1a;数据的基本单位&#xff0c;通常作为整体考…

快速上手Webpack打包指南:用简单的步骤掌握Webpack的使用技巧

目录 概念&#xff1a;1. webpack 打包简介1.0 多个 JS 文件打包&#xff1a;1.1 webpack 数组形式1.2 webpack 对象形式 总结 Webpack的打包过程可以总结为以下几个步骤&#xff1a; 1.入口点配置&#xff1a;在Webpack的配置文件中&#xff0c;我们需要指定一个或多个入口点…

数据接口有哪些?(数据接口有哪几种)

数据接口是指不同应用程序或系统之间交换数据的通信界面。在现代信息化社会中&#xff0c;数据接口扮演着极为重要的角色&#xff0c;它们使得不同平台之间能够相互连接和交流&#xff0c;从而实现数据共享和应用集成。 数据接口的种类繁多&#xff0c;常见的有以下几种&#…

SpringBoot开发小技巧使用(DEBUG、启动图标修改、Lombok、devtools、Spring Initializr)

目录 1. 通过DEBUG查看自动配置的组件2. springboot启动图标修改3. Lombok4. devtools5. 通过IDEA的Spring Initializr快速创建新项目 1. 通过DEBUG查看自动配置的组件 在resources/application.properties中添加如下&#xff0c;开启DEBUG功能&#xff1a; debugtrue然后启动…

SpringBoot 集成 EasyExcel 3.x 优雅实现 Excel 导入导出

介绍 EasyExcel 是一个基于 Java 的、快速、简洁、解决大文件内存溢出的 Excel 处理工具。它能让你在不用考虑性能、内存的等因素的情况下&#xff0c;快速完成 Excel 的读、写等功能。 EasyExcel文档地址&#xff1a; https://easyexcel.opensource.alibaba.com/ 快速开始 …

前后端分离windows本地nginx解决跨域

下载 http://nginx.org/en/download.html 命令 启动Nginx&#xff1a; nginx.exe start 快速停止或关闭Nginx&#xff1a; nginx.exe -s stop 正常停止或关闭Nginx&#xff1a; nginx.exe -s quit 配置文件修改重装载命令&#xff1a; nginx.exe -s reload 强制停用…

SQL调优教程

SQL调优教程 基础方法论 任何计算机应用系统性能问题最终都可以归结为 1.cpu消耗 2.内存使用 3.对磁盘&#xff0c;网络或其他I/O设备的输入/输出(I/O)操作 遇到性能问题时&#xff0c;要判断的第一点就是“在这三种资源中&#xff0c;是否有哪一种资源达到了有问题的程度”&…

Linux环境下Elasticsearch相关软件安装

Linux环境下Elasticsearch相关软件安装 本文将介绍在linux(Centos7)环境下安装Elasticsearch相关的软件。 1、安装Elasticsearch 1.1 Elasticsearch下载 首先去Elasticsearch官网下载相应版本的安装包&#xff0c;下载之后传输到linux服务器上。 官网地址&#xff1a;http…