CSS伪类:where和:is

CSS伪类:where和:is

  • 1 :where
    • 1.1 概述
    • 1.2 组合与叠加
    • 1.3 优先级
    • 1.4 安全性
    • 1.5 兼容性
  • 2 :is
    • 兼容性

1 :where

1.1 概述

:where()接受选择器列表作为它的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素。

例如,在以下代码中,a标签都会变成红色:

header a,
div a,
p a {color: red;
}
<header><a>橘猫吃不胖</a>
</header>
<div class="test1"><a>橘猫吃不胖</a>
</div>
<p class="test2"><a>橘猫吃不胖</a>
</p>

如果使用:where()改写以上样式,结果如下:

:where(div, p, header) a {color: red;
}

在上面的代码片段中,我们只选择了三个元素,但是如果有大量的元素和选择器,代码将开始看起来不整洁,并且可能变得难以阅读和理解,这就是:where()伪类函数发挥作用的地方。

1.2 组合与叠加

例如,下面是包含了大量选择器的例子,:where()可以写在不同的层级中:

示例1:层级靠前

#test1 > p,
.test2 > p,
div > p {color: red;
}
/* 用:where()重写之后: */
:where(#test1, .test2, div) > p {color: red;
}

示例2:层级靠后

header #test1:hover,
header .test2:hover,
header div:hover {color: red;
}
/* 用:where()重写之后: */
header :where(#test1, .test2, div):hover {color: red;
}

:where()也可以叠加使用,例如:

.test1 p,
.test2 a,
.test1 button,
.test2 a{color: red;
}
/* 用:where()重写之后: */
:where(.test1, .test2) :where(p, a) {color: red;
}

1.3 优先级

:where()的优先级是0,它的样式可以轻松被覆盖,例如下面这段代码:

.test {color: yellow;
}
:where(.test) {color: pink
}

最后字体的颜色是yellow

1.4 安全性

对于选择器列表,如果浏览器不能识别列表中的一个选择器,则整个选择器列表将被视为无效,它们的样式将不会被应用,然而,使用:where()伪类设置的样式,无效的选择器不会设置样式,但是其余有效的元素可以正常获得样式,这就是为什么:where()被称为安全的选择器。

1.5 兼容性

在这里插入图片描述

2 :is

:is():where()可以说一模一样,区别在于:is()的优先级不是0,而是由传入的选择器来决定的。

例如以下代码结构,虽然pink写在yellow之后,而且使用类选择器来选择,但是由于:where()的优先级是0,因此最后字体颜色为黄色:

div {color: yellow;
}
:where(.test) {color: pink
}
<div class="test">橘猫吃不胖</div>

如果使用:is()来选择,例如以下代码,虽然yellow写在pink之后,但是由于类选择器的优先级比标签选择器高,因此最后字体颜色为粉色:

:is(.test) {color: pink
}
div {color: yellow;
}

兼容性

在这里插入图片描述

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

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

相关文章

Java版 招投标系统简介 招投标系统源码 java招投标系统 招投标系统功能设计tbms

​ 项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以…

英文翻译照片怎么做?掌握这个方法轻松翻译

在现代社会中&#xff0c;英文已经成为了一种全球性的语言&#xff0c;因此&#xff0c;我们在阅读文章或者查看图片时&#xff0c;经常会遇到英文的内容。为了更好地理解这些英文内容&#xff0c;我们需要将其翻译成中文。在本文中&#xff0c;我将探讨图片中英文内容翻译的方…

SpringMVC 反射型跨站点脚本攻击

解决方案&#xff1a; 服务端校验&#xff0c;添加拦截器 配置web,xml <filter><filter-name>xssFilter </filter-name><filter-class>com.fh.filter.XssFilter </filter-class></filter> XssFilter package com.fh.filter;import com…

Spring Boot

前言 什么是Spring Boot&#xff1f;为什么要学Spring Boot&#xff1f; Spring 的诞⽣是为了简化Java 程序的开发的&#xff0c;⽽Spring Boot 的诞⽣是为了简化Spring 程序开发 的。Spring就像汽车&#xff0c;相比以前人只能其自行车走路&#xff0c;汽车可以帮助人们更快…

C#__使用Type类反射数据的基本用法

// 简单介绍 // 元数据&#xff08;metadata&#xff09;&#xff1a;与程序及其类型有关的数据。 // 反射&#xff1a;一个运行的程序查看本身元数据或其他程序集中的元数据的行为 // Assembly类&#xff1a;允许访问给定程序集的元数据&#xff0c;包含了可以加载和执行程序…

数字化客户运营过程中,保险企业如何释放客户旅程编排的价值?

近两年&#xff0c;受获客成本高企、转化率却没有相应提升等因素的影响&#xff0c;越来越多的企业开始重点关注存量客户经营&#xff0c;希望尽快寻找更高效的存量线索价值挖掘路径。 在此背景下&#xff0c;某保险企业与神策数据展开深度合作&#xff0c;结合存量客户转化过程…

C语言刷题训练DAY.9

1.菱形图案 解题思路&#xff1a; 这里我们先打印上面的三角&#xff0c;再打印下面的三角。 解题代码&#xff1a; #include<stdio.h> int main() {int n 0;while ((scanf("%d", &n)) ! EOF){int i 0;for (i 0; i < n; i){//先打印上面的三角int …

Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO

前言 Livox mid360需要使用Livox-SDK2&#xff0c;而非Livox-SDK&#xff0c;以及对应的livox_ros_driver2 。并需要修改FAST_LIO中部分代码。 1. 安装Livox-SDK2 参考官方教程。 1.1. 安装CMake sudo apt install cmake1.2. 安装编译Livox-SDK2 git clone https://github…

1. HBase中文学习手册之揭开Hbase的神秘面纱

揭开Hbase的神秘面纱 1.1 欢迎使用 Apache Hbase1.1.1 什么是 Hbase?1.1.2 Hbase的前世今生1.1.3 HBase的技术选型&#xff1f;1.1.3.1 不适合使用 HBase的场景1.1.3.2 适合使用 HBase的场景 1.1.4 HBase的特点1.1.4.1 HBase的优点1.1.4.2 HBase的缺点 1.1.5 HBase设计架构 1.…

苹果电脑怎么录屏?步骤详解,看到就是赚到

苹果电脑作为一款受欢迎的高性能设备&#xff0c;不仅在日常工作中发挥着重要作用&#xff0c;还可以用于创造内容&#xff0c;如录制屏幕内容。录屏功能能够帮助用户将屏幕上的活动记录成视频&#xff0c;方便分享、演示或存档。可是您知道苹果电脑怎么录屏吗&#xff1f;通过…

Redis分布式缓存

分布式缓存 -- 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题&#xff1a; 1.Redis持久化 Redis有两种持久化方案&#xff1a; RDB持久化 AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#x…

HTTP连接管理

基础知识&#xff1a;非持久连接 HTTP初始时1.0版本在浏览器每一次向服务器请求完资源都会立即断开TCP连接&#xff0c;如果想要请求多个资源&#xff0c;就必须建立多个连接&#xff0c;这就导致了服务端和客户端维护连接的开销。 例如&#xff1a;一个网页中包含文字资源也包…

每日两题 83删除排序链表的重复元素 82删除排序链表的重复元素||

83 题目 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,1,2] 输出&#xff1a;[1,2]示例 2&#xff1a; 输入&#xff1a;head [1,1,2,3,3] 输出&…

k8s service (二)

K8s service (二) Endpoint Endpoint是kubernetes中的一个资源对象&#xff0c;存储在etcd中&#xff0c;用来记录一个service对应的所有pod访问地址&#xff0c;它是根据service匹配文件中selector描述产生的。 一个Service由一组Pod组成&#xff0c;这些Pod通过Endpoints…

防火墙firewall

一、什么是防火墙 二、iptables 1、iptables介绍 2、实验 138的已经被拒绝&#xff0c;1可以 三、firewalld 1、firewalld简介 关闭iptables&#xff0c;开启firewalld&#xff0c;curl不能使用&#xff0c;远程连接ssh可以使用 添加80端口 这样写也可以&#xff1a;添加http…

腾讯云 CODING 荣获 TiD 质量竞争力大会 2023 软件研发优秀案例

点击链接了解详情 8 月 13-16 日&#xff0c;由中关村智联软件服务业质量创新联盟主办的第十届 TiD 2023 质量竞争力大会在北京国家会议中心召开。本次大会以“聚焦数字化转型 探索智能软件研发”为主题&#xff0c;聚焦智能化测试工程、数据要素、元宇宙、数字化转型、产融合作…

结构型(六) - 组合模式

一、概念 组合模式&#xff08;Composite Pattern&#xff09;&#xff1a;将对象组合成树形结构以表示“部分-整体”的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。 使用场景&#xff1a;组合结构不常用&#xff0c;需要部分与整体的层次关系为树形结…

ElasticSearch集群

ElasticSearch集群 1、相关概念 1. 单节点故障问题  单台服务器&#xff0c;往往都有最大的负载能力&#xff0c;超过这个阈值&#xff0c;服务器性能就会大大降低甚至不可用。单点的elasticsearch也是一样&#xff0c;那单点的es服务器存在哪些可能出现的问题呢&#xff1…

对象存储服务-MinIO基本集成

是什么 MinIO 是一个高性能的分布式对象存储服务&#xff0c;适合存储非结构化数据&#xff0c;如图片&#xff0c;音频&#xff0c;视频&#xff0c;日志等。对象文件最大可以达到5TB。 安装启动 mkdir -p /usr/local/minio cd /usr/local/minio# 下载安装包 wget https:/…

解决Windows下的docker desktop无法启动问题

以管理员权限运行cmd 报错&#xff1a; docker: error during connect: Post http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.40/containers/create: open //./pipe/docker_engine: The system cannot find the file specified. In the default daemon configuration on Windows,…