Web前端开发： :where(伪类函数选择器)

:where(伪类函数选择器)：

    :where() 是 CSS Selectors Level 4 规范中引入的一个强大的伪类函数选择器，它允许开发者以简洁的方式编写复杂的选择器，同时具有独特的优先级特性。

核心概念：

    :where() 伪类函数选择器与 :is() 非常相似，但有一个关键区别：它不会增加选择器的优先级权重。

基本语法：

:where(selector1, selector2, ..., selectorN) {/* 样式规则 */
}

核心特性：

  1. 优先级归零：:where() 内的选择器不会增加整个选择器的优先级

  2. 简化选择器：减少重复的选择器代码

  3. 容错机制：忽略无效选择器而不破坏整个规则

  4. 嵌套支持：支持多层嵌套使用

应⽤场景示例：

1、降低选择器的特异性

        :where() 选择器可以⽤来降低特定规则的特异性，使得这些规则更容易被其他样式覆盖。这在重置或归⼀化样式时⾮常有⽤。
:where(.class1, .class2) {color: black;
}
在这个示例中， .class1 和 .class2 的特异性被降低，它们将颜⾊设置为⿊⾊。

2、避免特异性战争

当你不希望样式规则之间发⽣特异性冲突时， :where() 是⼀个有⽤的⼯具。
:where(header, main, footer) h1 {font-size: 2em;
}

 这个例⼦中，⽆论 header , main , footer 的特异性如何， h1 标签总是应⽤相同的字体⼤⼩。

3、与 :is() 选择器结合

:where() 可以与 :is() 选择器结合使⽤，以控制样式规则的特异性。
:where(article, section) :is(h1, h2, h3) {margin-top: 0;
}

         在这个示例中，⽆论 article 或 section 的特异性如何， h1 , h2 , h3 标签的上边距都会被设置为0。

完整示例与演示：

代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS :where() 伪类函数选择器</title><style>* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #333;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);padding: 20px;min-height: 100vh;}.container {max-width: 1200px;margin: 0 auto;background-color: rgba(255, 255, 255, 0.95);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);overflow: hidden;}header {background: linear-gradient(to right, #3498db, #2c3e50);color: white;padding: 2rem;text-align: center;border-bottom: 5px solid #2980b9;}h1 {font-size: 2.8rem;margin-bottom: 1rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.subtitle {font-size: 1.4rem;opacity: 0.9;max-width: 800px;margin: 0 auto;}.content {display: flex;flex-wrap: wrap;padding: 30px;gap: 30px;}.explanation,.demo {flex: 1;min-width: 300px;background: white;border-radius: 10px;padding: 25px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}h2 {color: #2c3e50;border-bottom: 3px solid #3498db;padding-bottom: 10px;margin-bottom: 20px;font-size: 1.8rem;}h3 {color: #3498db;margin: 15px 0 10px;}.code-block {background: #2c3e50;color: #ecf0f1;padding: 15px;border-radius: 8px;font-family: 'Courier New', monospace;margin: 15px 0;overflow-x: auto;}.comment {color: #95a5a6;font-style: italic;}.selector {color: #e74c3c;}.property {color: #3498db;}.value {color: #2ecc71;}/* :where() 选择器演示 */:where(section, article, aside) :where(h2, h3) {color: #9b59b6;border-left: 4px solid #9b59b6;padding-left: 10px;}/* 这个规则会覆盖上面的 :where() 规则 */section h2 {color: #e74c3c;border-left: 4px solid #e74c3c;}/* 优先级演示 */:where(#priority-demo, .priority-class) p {background-color: #3498db;color: white;padding: 10px;border-radius: 4px;}.priority-class p {background-color: #2ecc71;}/* 容错机制演示 */:where(.valid-class, :invalid-selector) p {background-color: #f1c40f;color: #333;padding: 10px;border-radius: 4px;}.demo-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-top: 20px;}.demo-box {background: #f8f9fa;border: 1px solid #ddd;border-radius: 8px;padding: 20px;text-align: center;transition: all 0.3s ease;}.demo-box:hover {transform: translateY(-5px);box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);background: #fff;}.demo-box h3 {margin-top: 0;color: #2c3e50;}.priority-demo {background: #f0f7ff;padding: 15px;border-radius: 8px;margin-top: 20px;}footer {text-align: center;padding: 20px;background: #2c3e50;color: white;margin-top: 30px;border-top: 5px solid #3498db;}.browser-support {display: flex;justify-content: center;gap: 15px;flex-wrap: wrap;margin-top: 15px;}.browser {background: #34495e;padding: 8px 16px;border-radius: 30px;font-size: 0.9rem;}@media (max-width: 768px) {.content {flex-direction: column;}h1 {font-size: 2.2rem;}}</style>
</head><body><div class="container"><header><h1>CSS `:where()` 伪类函数选择器</h1><p class="subtitle">零优先级选择器，创建易于覆盖的基础样式</p></header><div class="content"><div class="explanation"><h2>:where() 是什么？</h2><p><strong>:where()</strong> 伪类函数选择器接受一个选择器列表作为参数，匹配列表中任意选择器可以选择的元素，但<strong>不会增加选择器的优先级</strong>。</p><div class="demo-box"><h3>核心优势</h3><ul><li><strong>零优先级</strong>：不会增加选择器权重，易于覆盖</li><li><strong>代码简化</strong>：减少选择器列表中的重复</li><li><strong>容错机制</strong>：忽略无效选择器而不破坏整个规则</li><li><strong>嵌套支持</strong>：支持多层嵌套使用</li></ul></div><h3>基本语法</h3><div class="code-block"><span class="comment">/* 匹配header或footer中的h1或h2元素 */</span><br><span class="selector">:where(header, footer) :where(h1, h2)</span> {<br>&nbsp;&nbsp;<span class="property">color</span>: <span class="value">#9b59b6</span>;<br>}</div><h3>与 :is() 的对比</h3><div class="code-block"><span class="comment">/* :is() - 优先级基于参数 */</span><br><span class="selector">:is(header, footer) h1</span> { <span class="comment">/* 优先级: 0,0,2 */</span>}<br><br><span class="comment">/* :where() - 优先级为零 */</span><br><span class="selector">:where(header, footer) h1</span> { <span class="comment">/* 优先级: 0,0,0*/</span> }</div><h3>使用场景</h3><ul><li>CSS重置和基础样式</li><li>主题和框架开发</li><li>需要轻松覆盖的通用样式</li><li>简化复杂的选择器组</li></ul></div><div class="demo"><h2>实际演示</h2><h3>标题样式</h3><p>使用 :where() 设置基础标题样式：</p><div class="demo-container"><section class="demo-box"><h2>Section 标题</h2><p>基础样式来自 :where()，但被后续规则覆盖</p></section><article class="demo-box"><h2>Article 标题</h2><p>保持 :where() 设置的紫色样式</p></article><aside class="demo-box"><h3>Aside 子标题</h3><p>保持 :where() 设置的紫色样式</p></aside></div><div class="priority-demo"><h3>优先级演示</h3><p>:where() 规则优先级为0，容易被覆盖：</p><div class="demo-container"><div id="priority-demo" class="demo-box"><h3>ID选择器元素</h3><p>使用 :where() 设置蓝色背景</p></div><div class="priority-class demo-box"><h3>类选择器元素</h3><p>:where() 样式被后续规则覆盖为绿色</p></div></div></div><h3>容错机制</h3><p>:where() 忽略无效选择器，应用有效部分：</p><div class="demo-container"><div class="valid-class demo-box"><h3>有效选择器</h3><p>应用了 :where() 的黄色背景</p></div><div class="demo-box"><h3>普通元素</h3><p>没有应用特殊样式</p></div></div><div class="demo-box"><h3>浏览器支持</h3><p>:where() 在现代浏览器中得到良好支持：</p><div class="browser-support"><div class="browser">Chrome 88+</div><div class="browser">Firefox 78+</div><div class="browser">Safari 14+</div><div class="browser">Edge 88+</div></div></div></div></div><footer><p>CSS :where() 伪类函数选择器演示 | 创建零优先级基础样式</p><p>提示：:where() 特别适合用于CSS重置和基础样式框架</p></footer></div>
</body></html>

效果展示：

 

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

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

相关文章

EfficientVMamba: Atrous Selective Scan for Light Weight Visual Mamba论文精读（逐段解析）

EfficientVMamba: Atrous Selective Scan for Light Weight Visual Mamba论文精读（逐段解析）

EfficientVMamba: Atrous Selective Scan for Light Weight Visual Mamba论文精读&#xff08;逐段解析&#xff09; 论文地址&#xff1a;https://arxiv.org/abs/2403.09977 CVPR 2024 Abstract. Prior efforts in light-weight model development mainly centered on CNN an…
阅读更多...
Integer缓冲区

Integer缓冲区

文章目录常见面试题&#xff1a;总结Integer缓冲区是Java预先创建的一个固定范围的Integer对象缓存池&#xff08;默认-128到127&#xff09;&#xff0c;用于自动复用频繁使用的整数值&#xff0c;减少内存开销和对象创建。当通过自动装箱或Integer.valueOf()生成该范围内的整…
阅读更多...
[国家电网备考]计算机网络

[国家电网备考]计算机网络

计算机网络的概述 概念: 用通信设备与线路将地理位置不同,功能独立的计算机系统互连起来,以功能完善的网络软件实现网络中资源共享和信息传递的系统 自治计算机: 能够自我管理,配置,维护的计算机(目前我们使用的电脑) 以前的终端只有显示器,不能叫做自治计算机 计算机网络向用户…
阅读更多...
在 Linux（openEuler 24.03 LTS-SP1）上安装 Kubernetes + KubeSphere 的防火墙放行全攻略

在 Linux（openEuler 24.03 LTS-SP1）上安装 Kubernetes + KubeSphere 的防火墙放行全攻略

目录 在 Linux&#xff08;openEuler 24.03 LTS-SP1&#xff09;上安装 Kubernetes KubeSphere 的防火墙放行全攻略 一、为什么要先搞定防火墙&#xff1f; 二、目标环境 三、需放行的端口和协议列表 四、核心工具说明 1. 修正后的 exec.sh 脚本&#xff08;支持管道/重…
阅读更多...
HTTP 响应头信息详解

HTTP 响应头信息详解

HTTP 响应头信息详解 引言 HTTP（超文本传输协议）是互联网上应用最为广泛的网络协议之一。在HTTP协议中，响应头信息是服务器向客户端发送的重要信息之一。响应头信息包含了关于响应的元数据，如状态码、内容类型、缓存策略等。本文将详细介绍HTTP响应头信息的概念、类型、作…
阅读更多...
去掉长按遥控器power键后提示关机、飞行模式的弹窗

去掉长按遥控器power键后提示关机、飞行模式的弹窗

首先找到对应长短按power键的位置&#xff1a;frameworks\base\policy\src\com\android\internal\policy\impl\PhoneWindowManager.javaprivate final Runnable mPowerLongPress new Runnable() {Overridepublic void run() {// The context isnt readif (mLongPressOnPowerBe…
阅读更多...
Redis-哨兵机制Sentinel

Redis-哨兵机制Sentinel

redis的主从复制模式下,一旦主节点出现了故障无法提供服务了,需要人工进行主从切换,同时大量的客户端需要被通知切换到新的主节点上,对于有了一定规模的应用来说,这种方案的延迟是无法接受的,于是redis2.8提供了Redis-Sentinel(哨兵)来解决这个问题. 目录 1.啥是哨兵节点: 2.r…
阅读更多...
SQL 视图

SQL 视图

SQL 视图 引言 SQL 视图是数据库管理系统中的一种重要概念，它允许用户以不同的方式查看数据库中的数据。本文将详细介绍 SQL 视图的概念、作用、创建方法以及在实际应用中的注意事项。 一、SQL 视图的概念 SQL 视图是数据库中的一种虚拟表，它并不存储实际的数据，而是基于…
阅读更多...
ESP32-使用VSCODE 各种问题总结汇总

ESP32-使用VSCODE 各种问题总结汇总

1 问题 1 1.1 具体问题描述-config:idf.customExtraPath 无法正确描述launch.json 中使用了一个变量&#xff1a; ${config:idf.customExtraPaths}但在 VSCode 的设置中&#xff0c;并没有找到对应的设置项 idf.customExtraPaths&#xff0c;所以无法解析。 1.2 问题解决 1.2.1…
阅读更多...
【剪裁Patch】已标注的WSI剪裁Patch的处理流程（以QuPath软件得到的标注信息为例）

【剪裁Patch】已标注的WSI剪裁Patch的处理流程（以QuPath软件得到的标注信息为例）

1. 整体处理思路 整体处理流程如图所示，概括来说就是：根据标注信息将WSI区分为肿瘤区域和正常区域，对这个区域进行采样裁剪得到具有Patch级别标签的Patch。 当然，这里的Patch标签是根据标注信息决定的，如果标注的是癌症亚型信息，那么也可以将不同亚型的Patch区分出来。 …
阅读更多...
Qt 与Halcon联合开发九：算法类设计与实现讲解（附源码）

Qt 与Halcon联合开发九：算法类设计与实现讲解（附源码）

一、设计背景 在机器视觉系统中&#xff0c;算法是系统的核心。不同产品、不同项目对图像处理的要求不尽相同&#xff0c;因此算法需要具备&#xff1a; 灵活拓展&#xff1a;方便添加新算法统一调用&#xff1a;界面或上层逻辑不关心算法细节结构清晰&#xff1a;便于维护与…
阅读更多...
npu-driver 23.0.3驱动安装

npu-driver 23.0.3驱动安装

宿主机器上安装npu-driver/ npu-firmware这两个东西 wget -O Ascend-hdk-910b-npu-driver_23.0.3_linux-aarch64.run https://bj.bcebos.com/v1/aipe-easyedge-public/cann/eb_speed/Ascend-hdk-910b-npu-driver_23.0.3_linux-aarch64.run?authorizationbce-auth-v1%2F50c8bb…
阅读更多...
LeetCode题解---＜三数之和＞

LeetCode题解---＜三数之和＞

文章目录题目<三数之和>--Python解法题解题目<三数之和>–Python解法 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为…
阅读更多...
探索Insplorion氢气传感器：高灵敏度与快速响应的创新解决方案

探索Insplorion氢气传感器：高灵敏度与快速响应的创新解决方案

在追求更清洁、更安全能源的过程中&#xff0c;氢气作为一种理想的清洁能源载体&#xff0c;正日益受到全球的重视。然而&#xff0c;氢气的广泛应用也带来了新的挑战——如何确保其储存、运输和使用的安全性&#xff1f;Insplorion通过其独特的纳米等离子体传感&#xff08;NP…
阅读更多...
【QT】事件（鼠标、按键、定时器、窗口）

【QT】事件（鼠标、按键、定时器、窗口）

文章目录1. 事件1.1 事件的介绍1.2 事件的处理2. 按键事件3. 鼠标事件4. 定时器5. 窗口事件1. 事件 1.1 事件的介绍 事件是应用程序内部或者外部产生的事情或者动作的统称。 在 Qt 中使用⼀个对象来表示⼀个事件。所有的 Qt 事件均继承于抽象类 QEvent。事件是由系统或者 Qt …
阅读更多...
STM32固件升级设计——串口IAP升级（基于YMODEM协议）

STM32固件升级设计——串口IAP升级（基于YMODEM协议）

目录 一、功能描述 1、BootLoader部分&#xff1a; 2、APP部分&#xff1a; 二、BootLoader程序制作 1、分区定义 2、 主函数 3、YMODEM协议的实现 4、程序跳转 三、APP程序制作 四、工程配置&#xff08;默认KEIL5&#xff09; 五、运行测试 结束语 概述 IAP&…
阅读更多...
Cookie（搭配domain）/Session（搭配HttpServletRequest+HttpSession）

Cookie（搭配domain）/Session（搭配HttpServletRequest+HttpSession）

各位看官&#xff0c;大家早安午安晚安呀~~~如果您觉得这篇文章对您有帮助的话欢迎您一键三连&#xff0c;小编尽全力做到更好 欢迎您分享给更多人哦今天我们来学习&#xff1a;Cookie/Session1.Cookie/Session的简述我们在讲解HTTP协议的时候已经讲解过Cookie了HTTP 协议自身是…
阅读更多...
240.搜索二维矩阵Ⅱ

240.搜索二维矩阵Ⅱ

纯暴力有点太唐了&#xff0c;不过竟然能过&#xff1b;还有行和列的表示我一直搞反了。。。class Solution {public boolean searchMatrix(int[][] matrix, int target) {for(int i 0 ;i<matrix.length;i){for(int j 0 ;j<matrix[0].length;j){if(matrix[i][j]target)…
阅读更多...
【计算机组成原理】-CPU章节学习篇—笔记随笔

【计算机组成原理】-CPU章节学习篇—笔记随笔

计算机组成原理 CPU 章节知识点总结&#xff08;适用于 408 考研&#xff09;​ 一、CPU 的功能与基本结构​ 1.1 CPU 的功能​ CPU&#xff08;中央处理器&#xff09;是计算机的核心部件&#xff0c;主要功能包括&#xff1a;​ 指令控制&#xff1a;程序的顺序执行&#xff…
阅读更多...
公用测控装置的功能

公用测控装置的功能

公用测控装置在电力系统中广泛应用于变电站的高压开关单元、变压器本体及低压侧等对象。它集测量、控制、保护于一体&#xff0c;确保电网的安全、稳定运行。公用测控装置采用高性能硬件架构&#xff0c;如32位微控制器和独立AD采样技术&#xff0c;结合软件算法&#xff0c;实…
阅读更多...
最新文章

Copyright @ 2022~2023