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

学习css 伪类:has

news 2025/10/13 20:18: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

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

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

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

矩阵的相似性度量的常用方法 1&#xff0c;欧氏距离 欧式距离是最易于理解的一种距离计算方法&#xff0c;源自欧式空间中两点间的距离公式。 (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. 综合练习 练习一&#xff1a;多发多收 需求&#xff1a; 客户端&#xff1a;多次发送数据 服务器&#xff1a;接收多次接收数据&#xff0c;并打印 代码示例&#xff1a; public class Client {public static void main(String[] args) throws IOException {//客户端&…...

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

Docker 日志管理 - ELK

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

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

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

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

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

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

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

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

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

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

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

最新AI智能创作系统源码SparkAi系统V2.6.3/AI绘画系统/支持GPT联网提问/支持Prompt应用/支持国内AI模型

一、智能AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统&#xff0c;已支持OpenAIGPT全模型国内AI全模型&#xff0c;已支持国内AI模型 百度文心一言、微软Azure、阿里云通义千问模型、清华智谱AIChatGLM、科大讯飞星火大模型等。本期针对源码…...

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

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

R | R包默认安装路径的查看及修改 一、R包安装位置查看二、已安装R包查询三、R包安装位置修改四、R包安装位置永久修改 在【R: R package安装的几种方式】【R: R版本更新及R包迁移&#xff08;详细步骤&#xff09;】两篇文章中介绍过R包的常见安装方式&#xff0c;以及在不同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之间的区别？各自优缺点？

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

编程日记 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 接收数据的时候发现数据接收出现粘包的现象&#xff0c;并且实时性很差&#xff0c;通过日志的时间戳发现数据接收的误差在 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 前&#xff0c;我们需要先将系统中以前的环境给卸载掉。 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 日志&#xff0c;就记录对数据库进行的操作&#xff0c;什么增删改的操作全…...

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

JAVA 学习笔记 2年经验

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

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

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

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

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

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/10/11 8:22:51

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/10/10 5:21:09

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/10/12 17:05:25

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/10/4 14:50:58

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/10/10 11:19:35

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/10/5 8:42:08

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/9/28 7:50:24

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/10/10 18:05:00