CSS 伪类函数 :is() 和 :where()

在编写 CSS 时,有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如,如果您想对标题中的 b 标签进行颜色调整,我们应该都写过这样的代码:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b { color: hotpink; }

现在,我们可以使用 :is() 缩减代码并提高其可读性:

:is(h1,h2,h3,h4,h5,h6) > b { color: hotpink; }

可以放在选择器之后

article :is(.header,.footer) > b { color: gray; }

相当于:

article .header b, article .footer b { color: gray; }

可以组合使用

:is(h1,h6):is(.header,.footer) > b { color: blue; }

相当于

h1.header > b, h1.footer > b, h6.header > b, h6.footer > b { color: blue; }

:where()  函数 和 :is()函数功能一样,不过:is()权重比:where()权重高

:is(h1,h2,h3,h4,h5,h6) > b { /* :is 生效 */ color: hotpink; } :where(h1,h2,h3,h4,h5,h6) > b { color: red; }

浏览器兼容性:

附送250套精选项目源码

源码截图

源码获取:关注公众号「码农园区」,回复 【源码】,即可获取全套源码下载链接

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

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

相关文章

不想root,但想远程控制vivo手机?这个方法不用root也能做到

远程控制vivo手机不用root!今天给大家讲讲免Root情况下,笔记本电脑如何远程控制vivo手机。 在电脑和手机都安装AirDroid,这是免Root的关键。 下载AirDroid个人版 | 远程控制安卓手机软件下载下载AirDroid个人版进行文件传输和管理、远程控制安…

八、HTML 链接

一、HTML 链接 HTML 使用超级链接与网络上的另一个文档相连。 HTML中的链接是一种用于在不同网页之间导航的元素。 链接通常用于将一个网页与另一个网页或资源(如文档、图像、音频文件等)相关联。 链接允许用户在浏览网页时单击文本或图像来跳转到其…

Python进程、线程、协程:多任务并发编程指南

概要 在当今计算机时代,为了提高程序的性能和响应速度,多任务并发编程成为了一种必不可少的技术手段。而Python作为一门高级编程语言,提供了多种多任务并发编程的方式,包括进程、线程和协程。本文将详细介绍这三种方式的使用教程…

Unity 打包AB 场景烘培信息丢失

场景打包成 AB 资源的时候,Unity 不会打包一些自带相关的资源 解决办法:在 Project settings > Graphics下设置(Automatic 修改成 Custom)

基于web的电影院购票系统

**🍅点赞收藏关注 → 私信领取本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验,陆续会更新更多优质的Java实战项目希望你能有所收获,少走一些弯路。🍅关注我不迷路🍅**一 、设计说明 1.1选题动因 …

cnPuTTY 0.80.0.1—PuTTY Release 0.80中文版本简单说明~~

2023-12-18 官方发布了PuTTY 0.80本次发布主要是针对Terrapin攻击(CVE-2023-48795)的修改发布。 更多详细的内容请查看PuTTY Change Log。 有关Terrapin攻击可用简单参考:警告!!!Terrapin攻击(CVE-2023-48795)~~~ 为了缓解此漏洞…

振弦采集仪在地基沉降监测中的应用研究

振弦采集仪在地基沉降监测中的应用研究 振弦采集仪是一种专门用于测量地基沉降的仪器,它采用振弦原理来测量地基的沉降情况。振弦采集仪通过在地基上安装一根细长的弹性振弦,并测量振弦的变形来获得地基沉降的数据。在地基沉降监测中,振弦采…

TypeScript Array(数组)

目录 1、数组初始化 2、Array 对象 3、数组迭代 4、数组在函数中的使用 4.1、作为参数传递给函数 4.2、作为函数的返回值 5、数组方法 数组对象是使用单独的变量名来存储一系列的值。数组非常常用。假如你有一组数据(例如:网站名字)…

从“五力”看百亿西凤的必然性

执笔 | 文 清 编辑 | 萧 萧 2023年末,西凤成功突破市场阻碍、跑赢行业周期,正式跻身中国百亿白酒品牌阵容。这是一份全行业及全体西凤人“预期之内”的成绩单。 当下,中国白酒已经进入“存量竞争”时代,马太效应使得强者恒强…

8-链表-旋转链表

这是链表的第8篇算法,力扣链接。 给你一个链表的头节点 head ,旋转链表,将链表每个节点向右移动 k 个位置。 示例 1: 输入:head [1,2,3,4,5], k 2 输出:[4,5,1,2,3]示例 2: 输入:h…

[足式机器人]Part2 Dr. CAN学习笔记-Ch01自动控制原理

本文仅供学习使用 本文参考: B站:DR_CAN Dr. CAN学习笔记-Ch01自动控制原理 1. 开环系统与闭环系统Open/Closed Loop System1.1 EG1: 烧水与控温水壶1.2 EG2: 蓄水与最终水位1.3 闭环控制系统 2. 稳定性分析Stability2.1 序言2.2 稳定的分类2.3 稳定的对…

【PTA-C语言】编程练习5 - 函数与指针

如果代码存在问题,麻烦大家指正 ~ ~有帮助麻烦点个赞 ~ ~ 编程练习5 - 函数与指针 6-1 求实数和的函数(分数 10)6-2 求解一元二次方程实根的函数(分数 10)6-3 求集合数据的均方差(分数 10)6-4 计…

天融信TOPSEC Cookie 远程命令执行漏洞

产品介绍 天融信TopSec 安全管理系统,是基于大数据架构,采用多种技术手段收集各类探针设备安全数据,围绕资产、漏洞、攻击、威胁等安全要素进行全面分析,提供统一监测告警、集中策略管控、协同处置流程,实现客户等保合…

FindMy技术用于鼠标

鼠标是计算机的标准配置之一,其设计初衷是为了使计算机的操作更加简便快捷,减少用户在操作中的负担。用户可以通过移动鼠标,实现光标的精确移动,进而选择、拖拽、复制、粘贴等操作。这种操作方式,使得计算机的操作变得…

人工智能未来发展前景怎么样?

人工智能的未来发展前景怎么样?人工智能的未来发展前景非常广阔,有以下几个方面的发展趋势和前景: 1、人工智能的未来发展前景-应用领域扩展:人工智能将在各个领域得到广泛应用,包括医疗保健、金融、交通、制造业、农业…

<软考高项备考>《论文专题 - 45 范围管理(4) 》

5 过程4-创建WBS 5.1 问题 4W1H过程做什么把项目可交付成果和项目工作分解成较小、更易于管理的组件的过程作用:为所要交付的内容提供0架构为什么做WBS代表着项目范围说明书所规定的工作,可以针对WBS 的工作包安排进度,估算成本和实施监控谁…

java SSM体育器材租借管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM体育器材租借管理系统是一套完善的web设计系统(系统采用SSM框架进行设计开发,springspringMVCmybatis),对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要…

海外服务器2核2G/4G/8G和4核8G配置16M公网带宽优惠价格表

腾讯云海外服务器租用优惠价格表,2核2G10M带宽、2核4G12M、2核8G14M、4核8G16M配置可选,可以选择Linux操作系统或Linux系统,相比较Linux服务器价格要更优惠一些,腾讯云服务器网txyfwq.com分享腾讯云国外服务器租用配置报价&#x…

GZ075 云计算应用赛题第5套

2023年全国职业院校技能大赛(高职组) “云计算应用”赛项赛卷5 某企业根据自身业务需求,实施数字化转型,规划和建设数字化平台,平台聚焦“DevOps开发运维一体化”和“数据驱动产品开发”,拟采用开源OpenSt…

17|回调函数:在AI应用中引入异步通信机制

17|回调函数:在AI应用中引入异步通信机制 回调函数和异步编程 回调函数,你可能并不陌生。它是函数 A 作为参数传给另一个函数 B,然后在函数 B 内部执行函数 A。当函数 B 完成某些操作后,会调用(即“回调”…