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

三个伪类让你的CSS代码更加优雅

公众号:程序员白特,欢迎一起交流学习~

原文:CSS整洁之道——:is()、:where()和:has()的用法 - 掘金 (juejin.cn)

让我们写出优雅界面的CSS,它也总是把自己进化得更加优雅。

今天我们花5分钟时间学习三个优雅的CSS伪类::is():where():has()

:is() - 取代组合选择器

:is() 允许你在一个规则中包含多个选择器。它接受一组选择器作为参数,并应用样式到匹配的元素上。

ul > li > a, 
ol > li > a, 
nav > ul > li > a, 
nav > ol > li > a { color: blue; 
}
/* 使用 :is() */
:is(ul, ol, nav > ul, nav > ol) > li > a { color: blue; 
}

:is() 可以简化多层嵌套和多种选择器组合的写法,让你维护样式更方便。

:is() 优先级依然遵循CSS选择器的优先级规则,即 ID -> 类 -> 元素 的顺序。

:is(.class1) a {color: blue;
}
:is(#id1) a {color: red;
}

这段代码里两条规则如果命中相同的元素,那么第二条会优先应用。

:is() 的参数也可以传一个匹配规则

:is([class^="is-styling"]) a {color: yellow;
}

这样的写法会匹配所有 class 开头是 is-styling 的选择器。

:where() - 拥有最低优先级

:where():is() 相似,都可以传入选择器或者匹配规则来简化你的CSS代码。

:where([class^="where-styling"]) a {color: yellow;
}

但和 :is() 不同的是,:where() 拥有最低优先级,这样的好处是它定义的样式规则不会影响其他样式规则,避免了样式冲突。

/* <footer class="where-styling">……</footer> */
footer a {color: green;
}
:where([class^="where-styling"]) a {color: red
}

当有其他规则和 :where() 同时被命中时,:where() 一定是失效的。所以上面这个例子实际效果是链接显示绿色。

:has() - 基于其他元素进行匹配

:has() 可以根据直接后代元素的存在来匹配元素

/* 选择直接包含 p 元素的 div */
div:has(> p) {border: 1px solid black;
}

也可以根据紧邻的下一个兄弟元素来匹配元素

/* 选择后面跟着 p 元素的 div */
div:has(+ p) {border: 1px solid black;
}

你还可以把它跟其他伪类一起使用,比如 :has():is() 一起使用

:has() 使用场景很多,只要是强互动的页面都可能用到,以后有机会单独分享一篇~

总结

大部分浏览器的新版本都已支持 :is():where():has() 这三个伪类了,如果你的项目跑在低版本的浏览器中,那么需要考虑一下回退策略。

相关文章:

三个伪类让你的CSS代码更加优雅

公众号&#xff1a;程序员白特&#xff0c;欢迎一起交流学习~ 原文&#xff1a;CSS整洁之道——:is()、:where()和:has()的用法 - 掘金 (juejin.cn) 让我们写出优雅界面的CSS&#xff0c;它也总是把自己进化得更加优雅。 今天我们花5分钟时间学习三个优雅的CSS伪类&#xff1a…...

幻兽帕鲁联机服务器搭建

幻兽帕鲁联机服务器搭建 开通云服务器 云主机购买|香港云服务器|香港云主机|美国云服务器|弹性云主机租用尽在-特网科技 建议选择4核心 16G内存 10M带宽&#xff0c;可满足6-15人游玩 下载安装脚本 windows系统: 下载 http://downinfo.myhostadmin.net/palserver/install…...

京东商品优惠券API获取商品到手价

item_get_app-获得JD商品详情原数据 公共参数 请求地址: jd/item_get_app 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_search,i…...

Flutter Version Manager (FVM): Flutter的版本管理终极指南

Flutter笔记 Flutter Version Manager (FVM) - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netEmail: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/article/details/136300307 my-websit…...

Docker技术概论(3):Docker 中的基本概念

Docker技术概论&#xff08;3&#xff09; Docker 中的基本概念 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://…...

死记硬背spring bean 的生命周期

1.bean的生命周期 我们平常经常使用类似于new Object()的方式去创建对象&#xff0c;在这个对象没有任何引用的时候&#xff0c;会被gc给回收掉。而对于spring而言&#xff0c;它本身存在一个Ioc容器&#xff0c;就是用来管理对象的&#xff0c;而对象的生命周期也完全由这个容…...

海外网红营销策略:如何将红人粉丝有效转化为品牌忠实粉丝?

在数字化时代&#xff0c;社交媒体已经成为品牌推广和营销的不可或缺的一部分。随着海外网红营销的崛起&#xff0c;品牌们纷纷将目光投向这个新兴的营销领域。然而&#xff0c;仅仅依赖网红的影响力来达到品牌传播的效果是不够的&#xff0c;更为重要的是如何将网红的粉丝转化…...

java之Bean对象

1. 什么是Bean&#xff1f; Bean被实例化的&#xff0c;是被Spring框架所管理的Java对象。 Spring容器会自动完成Bean的实例化。将所创建的的Bean自动注入到Ioc容器中以供调用。 spring框架中 IOC容器中管理的对象就是Bean对象 2. 第三方bean Bean 因为第三方bean&#xff0…...

Flink——芒果TV的实时数仓建设实践

目录 一、芒果TV实时数仓建设历程 1.1 阶段一&#xff1a;Storm/Flink JavaSpark SQL 1.2 阶段二&#xff1a;Flink SQLSpark SQL 1.3 阶段三&#xff1a;Flink SQLStarRocks 二、自研Flink实时计算调度平台介绍 2.1 现有痛点 2.2 平台架构设计 三、Flink SQL实时数仓分…...

卸载云服务器上的 MySQL 数据库

执行以下命令以停止 MySQL 服务&#xff1a; sudo service mysql stop执行以下命令以彻底卸载 MySQL&#xff1a; sudo apt-get remove --purge mysql-server mysql-client mysql-common sudo apt-get autoremove sudo apt-get autoclean 这将删除 MySQL 数据库服务器、客…...

AUTOSAR SPI详解

1.SPI通信 1&#xff09;SPI通信脚 SCLO&#xff1a;串行时钟sclk。MTSR&#xff1a;主向从方向数据MTSR(主发送从接收)。MRST&#xff1a;从向主方向数据MRST(主接收从发送)。SLSO&#xff1a;从选择信号SLS&#xff0c;支持16路片选控制。 2) SPI状态机 2.SPI通信波形 在主…...

SpringBoot快速入门(黑马学习笔记)

需求 需求&#xff1a;基于SpringBoot的方式开发一个Web应用&#xff0c;浏览器发起请求/hello后&#xff0c;给浏览器返回字符串"Hello World~"。 开发步骤 第一步&#xff1a;创建SpringBoot工程项目 第二步&#xff1a;定义HelloController类&#xff0c;添加方…...

压力测试工具Jmeter的下载与使用

1、进入官网下载Jmeter https://jmeter.apache.org/ 国内镜像&#xff08;下载的慢的话可以用国内镜像下载&#xff09; https://mirrors.cloud.tencent.com/apache/jmeter/binaries/ 2、跳转到下载页面 3、根据不同系统下载相应版本的Jmeter压缩包&#xff0c;Linux系统下载…...

kubectl 陈述式资源管理方法

目录 陈述式资源管理方法 项目的生命周期 1.创建kubectl create命令 2.发布kubectl expose命令 service的4的基本类型 查看pod网络状态详细信息和 Service暴露的端口 查看关联后端的节点 ​编辑 查看 service 的描述信息 ​编辑在 node01 节点上操作&#xff0c;查看…...

从 iOS 设备恢复数据的 20 个iOS 数据恢复工具

作为 iPhone、iPad 或 iPod 用户&#xff0c;您可能普遍担心自己可能会丢失存储在珍贵 iOS 设备中的所有宝贵数据。数据丢失的原因多种多样&#xff0c;这里列出了一些常见原因&#xff1a; 1. iOS 软件更新 2. 恢复出厂设置 3. 越狱 4. 误操作删除数据 5. iOS 设备崩溃 …...

cpp基础学习笔记03:类型转换

static_cast 静态转换 用于类层次结构中基类和派生类之间指针或者引用的转换。up-casting (把派生类的指针或引用转换成基类的指针或者引用表示)是安全的&#xff1b;down-casting(把基类指针或引用转换成子类的指针或者引用)是不安全的。用于基本数据类型之间的转换&#xff…...

H3C OSPF 外部路由引入实验

H3C OSPF 外部路由引入实验 实验拓扑 实验需求 按照图示配置 IP 地址R1&#xff0c;R2&#xff0c;R3 运行 OSPF 使内网互通&#xff0c;所有接口&#xff08;公网接口除外&#xff09;全部宣告进 Area 0&#xff1b;要求使用环回口作为 Router-id业务网段不允许出现协议报文…...

ARM简介

ARM&#xff1a;ARM是Advanced RISC Machine的缩写&#xff0c;意为高级精简指令集计算机。 英国ARM公司&#xff0c;2016年被软银创始人孙正义斥资320亿美元收购了。现在是软银旗下的芯片设计公司&#xff0c;总部位于英国剑桥&#xff0c;专注于设计芯片&#xff0c;卖芯片生…...

MySQL(基础篇)——事务

一.事务简介 事务是一组操作的集合&#xff0c;他是一个不可分割的单位&#xff0c;事务会把所有的操作作色一个整体一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 默认MySQL的事务是自动提交的&#xff0c;也就是说&#xff0c…...

XGB-15:调参注意事项

参数调优是机器学习中的一门黑艺术&#xff0c;一个模型的最优参数可能取决于许多情境。因此&#xff0c;要为此提供全面的指南是不可能的。 了解偏差-方差权衡Bias-Variance Tradeoff 当能允许模型变得更加复杂&#xff08;例如更深&#xff09;&#xff0c;模型具有更好的拟…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...