【你不知道的 CSS】你写的 CSS 太过冗余,以至于我对它下手了

:is()

你是否曾经写过下方这样冗余的CSS选择器:

.active a,
.active button,
.active label {
  color: steelblue;
}

其实上面这段代码可以这样写:

.active :is(a, button, label) {
  color: steelblue;
}

看~是不是简洁了很多!

是的,你可以使用 :is() 对选择器的任何部分进行分组,例如,你可以对如下代码:

.section h2,
.aside h2,
.nav h2 {
  color: steelblue;
}

进行转换:

:is(.section, .aside, .nav) h2 {
  color: steelblue;
}

但是 :is() 不仅对父选择器和子选择器有用,它也可以选择多个相邻的选择器,比如:

button:is(:focus, :hover, :active) {
  color: steelblue;
}

button:is(.active, .pressed) {
  color: lightsteelblue;
}

上述代码等价于:

button:focus, button:hover, button:active {
  color: steelblue;
}

button.active, button.pressed {
  color: lightsteelblue;
}

:where()

:where() 是一个与 :is() 非常相似的伪类,也值得注意。它们看起来非常相似:

:where(.section, .aside, .nav) h2 {
  color: steelblue;
}

但区别在于 :where 的权重为 0,而:is() 总是会采用列表中最特高的选择器的权重。例如,你知道下面的 CSS 代码中的按钮是什么颜色吗?

:is(html) button {
  color: red;
}

:where(html) button {
  color: blue;
}

在上面的例子中,虽然以 :where() 开头的块在以 :is() 开头的块下面,但 :is() 块具有更高的权重

:has()

一个相关但非常不同的伪类是:has():has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素

:has() 的一个示例是不显示下划线的情况下包含图像或视频的链接:

a { text-decoration: underline }

/* 链接有下划线,除非它们包含图像或视频 */
a:has(img, video) {
  text-decoration: none;
}

现在,如果默认情况下我们的 a 标记有下划线文本,但其中有图像或视频,则任何匹配的锚元素的下划线将被删除。

你也可以结合 :is() 使用:


:is(a, button):has(img, video) {
  text-decoration: none;
}

我们还需要预处理器吗?

现在你可能会说“SCSS可以做到这一点!,你甚至可能更喜欢它的语法:

.active {
  button, label, a {
    color: steelblue;
  }
}

说的没错,这很优雅。但是,CSS 似乎现在已经都能获取到我们曾经需要SCSS(或其他预处理器)才能获得的特性。

CSS 变量也是 CSS 本身的另一个不可思议的补充,它回避了一个问题:就是什么时候或者多久你真的需要预处理程序:

.active :is(a, button, label) {
  --color: steelblue;
  color: var(--steelblue);
}

这并不是说预处理器没有它们的用例和优点。

但我认为在某个时间点上,它们确实是处理任何重要CSS的强制要求,而现在情况不再如此了。

最后一个惊喜

我想说的是,CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。他们正在积极地在3种可能的语法之间进行选择:

/* 1 */
article {
  font-family: avenir;
  & aside {
    font-size: 1rem;
  }
}

/* 2 */
article {
  font-family: avenir;
} {
  aside {
    font-size: 1rem;
  }
}

/* 3 */
@nest article {
  & {
    font-family: avenir;
  }
  aside {
    font-size: 1rem;
  }
}

你最喜欢哪一个?

其实第 1 种已经被官方采纳!所以我们可能很快就会看到一个非常像 scss 的嵌套语法。

浏览器支持

目前所有主流浏览器都支持 :is():where() 伪类:

在这里插入图片描述
但是,需要注意,我们在这里提到的 :has() 伪类没有相同级别的支持,所以使用 :has() 时要小心:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

5种最佳像素化图像的方法

5种最佳像素化图像的方法1. 什么是像素化?2. 像素化有什么用?3. 如何像素化图像?参考Pixelate 像素化 这篇博客将讨论像素化及如何以五种最佳方式对图像进行像素化。有时希望在在线共享照片时保护照片的隐私。因此在共享图像之前会对图像的某…

锂电池充电的同时也能放电吗?

大家应该都有这样经历,我们的手机在充电的同时也能边使用,有的同学就会说了,这是因为手机电池在充电的同时也在放电。如果这样想我们可能就把锂电池类比了一个蓄水池,以为它在进水的同时也能出水,其实这个比喻是错误的…

【深度强化学习】(5) DDPG 模型解析,附Pytorch完整代码

大家好,今天和各位分享一下深度确定性策略梯度算法 (Deterministic Policy Gradient,DDPG)。并基于 OpenAI 的 gym 环境完成一个小游戏。完整代码在我的 GitHub 中获得: https://github.com/LiSir-HIT/Reinforcement-Learning/tree/main/Mod…

【洛谷刷题】蓝桥杯专题突破-深度优先搜索-dfs(10)

目录 写在前面: 题目:P1019 [NOIP2000 提高组] 单词接龙 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目描述: 输入格式: 输出格式: 输入样例: 输出样例: 解题思路: 代…

【数据结构】顺序表和链表

目录.顺序表.链表比较.顺序表 线性表的顺序存储结构,使用一段物理地址连续的存储单元以此存储数据单元的线性结构(从头开始连续存储) 静态顺序表:使用定长数组存储动态顺序表:使用动态开辟的数组存储(常用…

第十三届蓝桥杯省赛 python B组复盘

文章目录前言主要内容🦞试题 A:排列字母思路代码🦞试题 B:寻找整数思路代码🦞试题 C:纸张尺寸思路代码🦞试题 D:数位排序思路代码🦞试题 E:蜂巢思路代码&…

打印菱形、三角形-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)

【案例2-10】打印菱形、三角形 一、案例描述 考核知识点 for双重循环 练习目标 掌握for循环应用。打印出菱形打印出三角形。 需求分析 在本案例中我们将用JavaScript代码在页面中用“*”打印出菱形和三角形。 案例分析 菱形效果如图2-16所示。输入菱形行数6打印菱形 三角形…

计及光伏波动性的主动配电网有功无功协调优化(Matlab代码实现)

👨‍🎓个人主页:研学社的博客💥💥💞💞欢迎来到本博客❤️❤️💥💥🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密…

JVM知识整理

JVM知识整理 JVM的主要组成部分 JVM包含两个两个子系统(类加载子系统和执行引擎)和两个组件(运行时数据区与和本地库接口) 类加载子系统:根据给定的全限定类名来加载class文件到运行时数据区域中的方法区。执行引擎&a…

学大数据算跟风吗?

随着互联网、物联网和人工智能等技术的不断发展,大数据技术逐渐进入人们的视野,成为一个备受关注的热点话题。那么,大数据专业好学吗?前景如何?下面我们来一起探讨一下。 一、大数据专业的学习难度 大数据技术是一种综…

将 XLS 转换为 EXE:xlCompiler Crack

只需单击几下即可将Excel文件转换为应用程序 xl编译器无需编程即可将您的Excel电子表格转换为软件应用程序 将 XLS 转换为 EXE 将Excel文件转换为具有保护选项的应用程序。Excel 到 EXE 转换器为您提供了分发 Excel 模型的竞争优势和灵活性。将 Excel 的功能丰富的环境保存在应…

一文了解Gralde

🏠个人主页:shark-Gao 🧑个人简介:大家好,我是shark-Gao,一个想要与大家共同进步的男人😉😉 🎉目前状况:23届毕业生,目前在某公司实习&#x1f…

蓝桥杯·3月份刷题集训Day02

本篇博客旨在记录自已打卡蓝桥杯3月份刷题集训,同时会有自己的思路及代码解答希望可以给小伙伴一些帮助。本人也是算法小白,水平有限,如果文章中有什么错误之处,希望小伙伴们可以在评论区指出来,共勉💪。 文…

第14届蓝桥杯STEMA测评真题剖析-2023年3月12日Scratch编程初中级组

[导读]:超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成,后续会不定期解读蓝桥杯真题,这是Scratch蓝桥杯真题解析第113讲。 蓝桥杯选拔赛现已更名为STEMA,即STEM 能力测试,是蓝桥杯大赛组委会与美国普林斯顿多…

JavaScript 应用

目录 1、编程实现“计算任意区间内连续自然数的累加和”页面。 代码实现 2、应用 appendChild()方法和 getElementById()方法实现年月日的联动功能。 代码 1、编程实现“计算任意区间内连续自然数的累加和”页面。 (1)文档结构的创建 启动程序&#…

若依框架---权限管理设计

前言 若依权限管理包含两个部分:菜单权限 和 数据权限。菜单权限控制着我们可以执行哪些操作。数据权限控制着我们可以看到哪些数据。 菜单是一个概括性名称,可以细分为目录、菜单和按钮,以若依自身为例: 目录,就是页…

acm省赛:高桥和低桥(三种做法:区间计数、树状数组、线段树)

题目描述 有个脑筋急转弯是这样的:有距离很近的一高一低两座桥,两次洪水之后高桥被淹了两次,低桥却只被淹了一次,为什么?答案是:因为低桥太低了,第一次洪水退去之后水位依然在低桥之上&#xff…

Linux内核IO基础知识与概念

什么是 IO在计算机操作系统中,所谓的I/O就是 输入(Input)和输出(Output),也可以理解为读(Read)和写(Write),针对不同的对象,I/O模式可以划分为磁盘…

<Linux>进程控制

进程控制 文章目录进程控制一、进程创建1.fork函数认识2.写时拷贝3.fork常规用法4.fork调用失败的原因二、进程终止1.进程退出场景2.进程退出码3.进程退出的方式三、进程等待1.进程等待是什么?2.进程等待的必要性3.进程等待的方法3.1.wait函数3.2.waitpid函数4.如何…

为什么 ChatGPT 输出时经常会中断,需要输入“继续” 才可以继续输出?

作者:明明如月学长, CSDN 博客专家,蚂蚁集团高级 Java 工程师,《性能优化方法论》作者、《解锁大厂思维:剖析《阿里巴巴Java开发手册》》、《再学经典:《EffectiveJava》独家解析》专栏作者。 热门文章推荐…