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

学习css 伪类:has

news 文章来源：https://blog.csdn.net/weixin_43845059/article/details/133648896 2025/1/17 3:43:22

学习抖音： @渡一前端提薪课

首先我们看下:has(selector)是什么

匹配包含（相对于 selector 的 :scope）指定选择器的元素。可以认为 selector 的前面有一个看不见的 :scope 伪类。它的强大之处是，可以实现父选择器和前面兄弟选择器的功能。支持所有的 CSS 选择符。

我们举个例子：

css

  .box1:has(p) {color: red;
}.box1:has(span) {color: blue;
}
.box1:has(a, div) {color: greenyellow;
}

html

<body><div class="box1"><p>ppp</p></div><div class="box1"><span>span</span></div><div class="box1"><a>有p</a></div><div class="box1"><div>有div</div></div>
</body>

结果，.box1:has(p) 就是包含 p 标签的.box1 元素。.box1:has(span)就是包含span的元素，.box1:has(a, div) 就是包换 a 和包含div的元素

进阶

知道这个原理后我们在进阶一下，看看子的伪类可不可以用。

css

.box1:has(.red:hover) {color: red;
}
.box1:has(.blue:hover) {color: blue;
}
.box1:has(.yellow:hover) {color: yellow;
}

html

<div class="box1"><div class="red">变红色</div><div class="blue">变蓝色</div><div class="yellow">变黄色</div>
</div>

结果：

基于这个特效我们做一个案例

案例

直接上代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo-2</title><style>* {padding: 0;margin: 0;}.container {width: 400px;height: 400px;border: 2px solid #999;position: absolute;top: 100px;left: 50%;transform: translateX(-50%);display: grid;transition: 0.5s;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;gap: 5px}.item:nth-of-type(1) {background: red;}.item:nth-of-type(2) {background: rgb(255, 208, 0);}.item:nth-of-type(3) {background: rgb(0, 255, 0);}.item:nth-of-type(4) {background: rgb(166, 255, 0);}.item:nth-of-type(5) {background: rgb(170, 88, 224);}.item:nth-of-type(6) {background: rgba(0, 238, 255, 0.726);}.item:nth-of-type(7) {background: rgb(255, 115, 0);}.item:nth-of-type(8) {background: rgb(86, 75, 241);}.item:nth-of-type(9) {background: rgb(255, 0, 149);}.container:has(.item:nth-of-type(1):hover) {grid-template-columns: 2fr 1fr 1fr;grid-template-rows: 2fr 1fr 1fr;}.container:has(.item:nth-of-type(2):hover) {grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 2fr 1fr 1fr;}.container:has(.item:nth-of-type(3):hover) {grid-template-columns: 1fr 1fr 2fr;grid-template-rows: 2fr 1fr 1fr;}.container:has(.item:nth-of-type(4):hover) {grid-template-columns: 2fr 1fr 1fr;grid-template-rows: 1fr 2fr 1fr;}.container:has(.item:nth-of-type(5):hover) {grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 1fr 2fr 1fr;}.container:has(.item:nth-of-type(6):hover) {grid-template-columns: 1fr 1fr 2fr;grid-template-rows: 1fr 2fr 1fr;}.container:has(.item:nth-of-type(7):hover) {grid-template-columns: 2fr 1fr 1fr;grid-template-rows: 1fr 1fr 2fr;}.container:has(.item:nth-of-type(8):hover) {grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 1fr 1fr 2fr;}.container:has(.item:nth-of-type(9):hover) {grid-template-columns: 1fr 1fr 2fr;grid-template-rows: 1fr 1fr 2fr;}</style>
</head><body><div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
<script>
</script></html>

效果：

学习css 伪类:has

学习抖音： 渡一前端提薪课首先我们看下:has(selector)是什么匹配包含（相对于 selector 的 :scope）指定选择器的元素。可以认为 selector 的前面有一个看不见的 :scope 伪类。它的强大之处是，可以实现父选择器和前面兄弟选择器…...

编程日记 2023/10/8 5:45:24

矩阵的相似性度量的常用方法

矩阵的相似性度量的常用方法 1，欧氏距离欧式距离是最易于理解的一种距离计算方法，源自欧式空间中两点间的距离公式。 (1)二维平面上的点 a ( x 1 , y 1 ) a(x_1,y_1) a(x1,y1)和点 b ( x 2 , y 2 ) b(x_2,y_2) b(x2,y2)的欧式距离为 d ( x …...

编程日记 2023/10/8 5:44:18

Java之TCP,UDP综合小练习一

4. 综合练习练习一：多发多收需求： 客户端：多次发送数据服务器：接收多次接收数据，并打印代码示例： public class Client {public static void main(String[] args) throws IOException {//客户端&…...

编程日记 2023/10/8 5:43:17

Docker 日志管理 - ELK

Author：rab 目录前言一、Docker 日志驱动二、ELK 套件部署三、Docker 容器日志采集3.1 部署 Filebeat3.2 配置 Filebeat3.3 验证采集数据3.4 Kibana 数据展示3.4.1 创建索引模式3.4.2 Kibana 查看日志总结前言如何查看/管理 Docker 运行容器的日志？…...

编程日记 2023/10/8 5:42:06

windows系统下利用python对指定文件夹下面的所有文件的创建时间进行修改

windows系统下利用python对指定文件夹下面的所有文件的创建时间进行修改不知道其他的朋友们有没有这个需求哈，反正咱家是有这个需求需求1、当前有大量的文件需要更改文件生成的时间，因为不可告知的原因，当前的文件创建时间是不能满足使用的…...

编程日记 2023/10/8 5:41:05

线性表的链式表示——单链表；头插，尾插，按值查找，按序号查找，插入，删除；

#include <iostream> #include <algorithm>//fill() #define InitSize 5using namespace std;/*线性表：链式表示——单链表；头插，尾插，按值查找，按序号查找，插入，删除*/ typedef st…...

编程日记 2023/10/8 5:39:03

【Spring Cloud系统】- Zookeer特性与使用场景

【Spring Cloud系统】- Zookeer特性与使用场景一、概述 Zookeeper是一个分布式服务框架，是Apache Hadoop的一个子项目，它主要是用来解决分布式应用中经常遇到的一些数据管理问题。如：统一命名服务、状态同步服务、集群管理、分布式应用配置…...

编程日记 2023/10/8 5:38:01

R | R包默认安装路径的查看及修改

R | R包默认安装路径的查看及修改一、R包安装位置查看二、已安装R包查询三、R包安装位置修改四、R包安装位置永久修改在【R: R package安装的几种方式】【R: R版本更新及R包迁移（详细步骤）】两篇文章中介绍过R包的常见安装方式，以及在不同R…...

编程日记 2023/10/8 5:36:00

将conda虚拟环境打包并集成到singularity镜像中

1. 使用yml文件打包 conda activate your_env conda env export > environment.yml编写cond.def文件 Bootstrap: dockerFrom: continuumio/miniconda3%filesenvironment.yml%post/opt/conda/bin/conda env create -f environment.yml%runscriptexec /opt/conda/envs/$(hea…...

编程日记 2023/10/8 5:34:59

Android Studio 是如何和我们的手机共享剪贴板的

背景近期完成了target33的项目适配升级,随着AGP和gradle的版本升级,万年老版本Android Studio(后文简称AS)也顺便升级到了最新版Android Studio Giraffe | 2022.3.1,除了新UI外,最让我好奇的是这次的Running Devices功能(官方也称为Device mirroring)可以控制真机了. 按照操…...

编程日记 2023/10/8 5:33:57

大数据面试题：Spark和MapReduce之间的区别？各自优缺点？

面试题来源： 《大数据面试题 V4.0》大数据面试题V3.0，523道题，679页，46w字可回答： 1）spark和maprecude的对比；2）mapreduce与spark优劣好处问过的一些公司：阿里云…...

编程日记 2023/10/8 5:32:56

【开发篇】十八、SpringBoot整合ActiveMQ

文章目录 1、安装ActiveMQ2、整合3、发送消息到队列4、使用消息监听器对消息队列监听5、流程性业务消息消费完转入下一个消息队列6、发布订阅模型 1、安装ActiveMQ docker安装 docker pull webcenter/activemqdocker run -d --name activemq -p 61616:61616 -p 8161:8161 webce…...

编程日记 2023/10/8 5:31:55

QTcpSocket 接收数据实时性问题

一、开发背景使用 Qt 的 QTcpSocket 接收数据的时候发现数据接收出现粘包的现象，并且实时性很差，通过日志的时间戳发现数据接收的误差在 100ms 以内。二、开发环境 Qt5.12.2 QtCreator4.8.2 三、实现步骤在 socket 连接的槽函数设置接收延时时间&…...

编程日记 2023/10/8 5:29:52

前端el-select 单选和多选

el-select单选 <el-form-item label"部门名称" prop"departId"><el-select v-model"dataForm.departId" placeholder"请选择" clearable:style{ "width": "100%" } :multiple"false" filtera…...

编程日记 2023/10/8 5:28:51

【MySQL】Linux 中 MySQL 环境的安装与卸载

文章目录 Linux 中 MySQL 环境的卸载Linux 中 MySQL 环境的安装 Linux 中 MySQL 环境的卸载在安装 MySQL 前，我们需要先将系统中以前的环境给卸载掉。 1、查看以前系统中安装的 MySQL rpm -qa | grep mysql2、卸载这些 MySQL rpm -qa | grep mysql | args yum …...

编程日记 2023/10/8 5:27:49

机器学习算法分类

学习视频黑马程序员监督学习无监督学习半监督学习强化学习...

编程日记 2023/10/8 5:26:49

Mysql bin-log日志恢复数据与物理备份-xtrabackup

主打一个数据备份与恢复 binlog与xtarbackup bin-log日志恢复开启bin-log配置bin-log日志恢复物理备份-xtrabackup三种备份方式安装xtrabackup备份全量备份增量备份差异备份 bin-log日志恢复 bin-log 日志，就记录对数据库进行的操作，什么增删改的操作全…...

编程日记 2023/10/8 5:25:48

JAVA 学习笔记 2年经验

文章目录基础String、StringBuffer、StringBuilder的区别jvm堆和栈的区别垃圾回收标记阶段清除阶段异常类型双亲委派机制hashmap和hashtable concurrentHashMap 1.7和1.8的区别java的数据结构排序算法，查找算法堆排序 ThreadLocal单例模式常量池synchronizedsynch…...

编程日记 2023/10/8 5:24:47

网络安全--安全认证、IPSEC技术

目录 1. 什么是数据认证，有什么作用，有哪些实现的技术手段？ 2. 什么是身份认证，有什么作用，有哪些实现的技术手段？ 3. 什么是VPN技术？ 4. VPN技术有哪些分类？ 5. IPSEC技术能够…...

编程日记 2023/10/8 5:23:46

Mysql——创建数据库，对表的创建及字段定义、数据录入、字段增加及删除、重命名表。

一.创建数据库 create database db_classics default charsetutf8mb4;//创建数据库 use db_classics;//使用该数据库二.对表的创建及字段定义 create table if not exists t_hero ( id int primary key auto_increment, Name varchar(100) not null unique, Nickname varchar(1…...

编程日记 2023/10/8 5:22:45

第1篇目标检测概述 —（4）目标检测评价指标

前言：Hello大家好，我是小哥谈。目标检测评价指标是用来衡量目标检测算法性能的指标，可以分为两类，包括框级别评价指标和像素级别评价指标。本节课就给大家重点介绍下目标检测中的相关评价指标及其含义，希望大家学习之后…...

编程日记 2023/10/8 5:19:42

前端和后端是Web开发中的两个不同的领域，你更倾向于哪一种？

前端和后端是Web开发中的两个不同的领域，你更倾向于哪一种？ 你可以从以下几个维度谈谈你对前端开发和后端开发的看法。此为内容创作模板，在发布之前请将不必要的内容删除一、引言提示：可对前端开发和后端开发进行简要介绍并提出…...

编程日记 2023/10/8 5:18:41

SpringBoot集成MyBatis-Plus实现增删改查

背景因为学习工具的时候经常需要用到jar包，需要增删查改接口，所以参考文章实现了基于mybatis-plus的增删查改接口。参考文章：第二十二节:SpringBoot集成MyBatis-Plus实现增删改查原文中的git地址不存在，本文内容是原文代码修…...

编程日记 2023/10/8 5:17:41

基于STM32设计的智能水产养殖系统(华为云IOT)

一、设计简述基于STM32设计的智能水产养殖监测系统 1.1 项目背景随着经济的发展和人口的增长，对水产养殖的需求不断增加。然而，传统的水产养殖方式存在一系列问题，如水质污染、鱼病爆发等。因此，智能化水产养殖技术成为当前热门研究领域。其中，基于物联网技术的智能水产…...

编程日记 2023/10/8 5:16:40

运行软件找不到mfc140u.dll怎么解决，mfc140u.dll是什么文件

"找不到 mfc140u.dll"是一条错误信息，表示您的计算机上缺少一个名为 mfc140u.dll 的动态链接库（DLL）文件。这个文件通常与 Microsoft Visual C Redistributable 相关。Mfc140u.dll 是 Microsoft 基础类库（MFC&#xff0…...

编程日记 2023/10/8 5:15:39

数据结构（2-5~2-8）

2-5编写算法，在单链表中查找第一值为x的结点，并输出其前驱和后继的存储位置 #include<stdio.h> #include<stdlib.h>typedef int DataType; struct Node {DataType data; struct Node* next; }; typedef struct Node *PNode; …...

编程日记 2023/10/8 5:13:38

浅谈智能安全配电装置在老年人建筑中的应用

摘要：我国每年因触电伤亡人数非常多，大多数事故是发生在用电设备和配电装置。在电气事故中，无法预料和不可抗拒的事故是比较少的，大量用电事故可采取切实可行措施来预防。本文通过结合老年人建筑的特点和智能安全配电装置的功能&a…...

编程日记 2023/10/8 5:12:37

【ES】笔记-ES6模块化

暴露数据引入模块语法规范基本语法分别暴露 (按需暴露)统一暴露 export {暴露内容1，暴露内容2}默认暴露 (适合只暴露一个数据) 只能暴露一次同时使用在app.js中引入规范每个文件都是一个模块要借助Babel和Browserify依次编译代码，才能在浏览器端运行…...

编程日记 2023/10/8 5:11:36

阿里云/腾讯云国际站代理：腾讯云国际站开户购买EdgeOne发布，安全加速一体化方案获业内认可

作为下一代CDN产品面世的腾讯云EdgeOne，历时一年服务，腾讯云国际站凭借安全加速一体化的解决方案，用All in One 架构构筑边缘应用无限想象。近年来，随着5G网络、物联网、边缘计算的快速发展，爆炸式增长的数据量和市场…...

编程日记 2023/10/8 5:10:35

郴州网站制作/cps推广联盟

ARM处理器工作模式 ARM处理器支持7种工作模式。分别为： 用户模式（usr）：ARM处理器正常的程序执行状态。快速中断模式（fiq）：用于高速数据传输或通道处理外部中断模式（irq&#xff09…...

编程日记 2025/1/17 2:20:01

wordpress 后台 logo/竞价推广账户竞价托管公司

通信知识第17篇；在上一篇中介绍了一文轻松了解Mac引入Valn，老化机制，转发流程通信基础概念16本节内容主要深入理解valn相关概念，接下来的章节会对二层通信知识点进行系统讲解。VLAN相关基础知识可以先看：一文轻松理解v…...

编程日记 2025/1/17 2:10:54

企业网站cms/南宁百度seo价格

枚举类要引如 enum 包，继承 Enum 类 import matplotlib.pyplot as plt import enumclass Color(enum.Enum):red rgreen gplt.scatter(1,2,colorColor.red.value)Color.red.nameredColor.red.valuer更加详细的使用方法请参考： https://www.cnblogs.c…...

编程日记 2025/1/16 22:50:27

三牛网络推广/seo综合查询

看redis官网的介绍： redis确实是有事务的，但是和传统的ACID是否相同呢? 原子性（Atomicity） 原子性是指事务是一个不可分割的工作单位，事务中的操作要么都发生，要么都不发生。　　一致性（Consis…...

编程日记 2025/1/16 22:06:59

常州市新北区城乡建设局网站/公司策划推广

2018年已经过去，各行各业都在盘点这一年的成绩，随着国产手机品牌的崛起，曾经不可一世的苹果，也逐渐没落，如今我们熟悉的很多黑科技都出自于国产自主手机品牌。不得不承认的是，近年来国产手机完成了化茧成蝶…...

编程日记 2025/1/16 21:33:50

wordpress入门教程(视频)/百度推广外推联系方式

AVR c语言优秀编程风格作为一个初学者如何具有良好的程序设计风格呢？我想引用一个关于初学者请教编程大师的故事让读者自己去领悟。有一位编程大师，他写非结构化的程序，一位初学者刻意模仿他，也写非结构化的程序。当他让大师看他的…...

编程日记 2025/1/16 21:30:41

首先我们看下:has(selector)是什么

进阶

案例

相关文章：