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

CSS 根据子元素选择父元素,并设置父元素的样式

场景举例:当子元素有增加了一个class时,需要影响其父元素的样式

可以使用":has"伪类来实现选择父元素的效果

<style>.parent:has(.child){background-color: #eee;}p{width:100px;border:1px solid #000;}
</style>
<body>
<div class="parent"><p class="">测试效果</p>
</div>
</body>

<style>.parent:has(.child){background-color: #eee;}p{width:100px;border:1px solid #000;}
</style>
<body>
<div class="parent"><p class="child">测试效果</p>
</div>
</body>

可以看到,当p元素拥有child类时,父元素的样式发生了改变

相关文章:

CSS 根据子元素选择父元素,并设置父元素的样式

场景举例&#xff1a;当子元素有增加了一个class时&#xff0c;需要影响其父元素的样式 可以使用":has"伪类来实现选择父元素的效果 <style>.parent:has(.child){background-color: #eee;}p{width:100px;border:1px solid #000;} </style> <body>…...

onnx转trt时,关于动态shape自动配置默认值的脚本

onnx转trt时&#xff0c;关于动态shape自动配置默认值&#xff0c;一般需要指定3个shape&#xff0c;分别是最小最优与最大。但是我们在测试时不想写那么多的代码&#xff0c;能否自动实现3个shape的配置&#xff0c;这里实现了一版。 import osimport tensorrt as trt import…...

实验室无法培养的菌,原来可以这么研究!

厌氧氨氧化&#xff08;anammox&#xff09;细菌在全球氮循环和废水氮去除中发挥着至关重要的作用&#xff0c;由于anammox细菌生长缓慢、难以培养等特点&#xff0c;对其生态学和生物学特性知之甚少。近日&#xff0c;凌恩生物合作客户重庆大学陈猷鹏教授团队在《Science of t…...

Xed编辑器开发第一期:使用Rust从0到1写一个文本编辑器

这是一个使用Rust实现的轻量化文本编辑器。学过Rust的都知道&#xff0c;Rust 从入门到实践中间还隔着好几个Go语言的难度&#xff0c;因此&#xff0c;如果你也正在学习Rust,那么恭喜你&#xff0c;这个项目被你捡到了。本项目内容较多&#xff0c;大概会分三期左右陆续发布&a…...

农业自动气象监测站:赋能智慧农业的新动力

在信息化、智能化快速发展的今天&#xff0c;农业领域也迎来了前所未有的变革。其中&#xff0c;农业自动气象监测站作为智慧农业的重要组成部分&#xff0c;正在发挥着越来越重要的作用。它们如同农业生产的“眼睛”和“耳朵”&#xff0c;实时感知和记录着大气的微妙变化&…...

2-6 任务 猜数小游戏(单次版)

本任务要求编写一个猜数小游戏&#xff08;单次版&#xff09;&#xff0c;游戏规则是计算机产生一个0到100之间的随机整数&#xff0c;用户通过输入猜测的数字进行猜测&#xff0c;根据猜测情况给出提示&#xff0c;直到猜对为止。编程思路是利用while循环和多分支结构实现永真…...

springboot 定时任务解决方案

Scheduled (springboot 自带的 注解) 基于注解Scheduled默认为单线程&#xff0c;开启多个任务时&#xff0c;任务的执行时机会受上一个任务执行时间的影响。 EnableScheduling注解&#xff1a; 在配置类上使用&#xff0c;开启计划任务的支持&#xff08;类上&#xff09;。…...

谷粒商城实战(024 业务-订单模块-分布式事务1)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第284p-第p290的内容 简介 模拟积分服务出异常&#xff0c;前方的锁库存事务未回滚&#xff0c;这时候就需要分布式事务 本地事务 事务的隔离…...

.NET使用Microsoft.IdentityModel.Tokens对SAML2.0登录断言校验

如题。使用SAML单点登录对IDP返回的Response断言使用微软提供的Microsoft.IdentityModel.Tokens对断言&#xff08;Assertion&#xff09;进行校验。 首先需要安装Muget包&#xff0c;Microsoft.IdentityModel.Tokens和Microsoft.IdentityModel.Tokens.Saml。 简易示例代码如…...

性能测试学习二

瓶颈的精准判断 TPS曲线 tps图 响应时间图 拐点在哪里呢? 这是一个阶梯式增加的场景,拐点在第二个压力阶梯上就出现了,因为响应时间增加了,tps增加的却不多,在第三个阶段时,tps增加的就更少了,响应时间也在不断增加,所以性能瓶颈在加剧,越往后越明显【tps的增长,…...

小丑的身份证和复印件 (BFS + Floyd)

本题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例&#xff1a; 输入 2 10 (JOKERjoke #####asdr) 输出 12 思路&#xff1a; 根据题意&#xff0c;要求最短时间&#xff0c;实际上也可以理解为最短距离。 所以应该联想到有关最短距离的算法&…...

C++类与对象(上)

C类与对象 面向过程和面向对象初步认识类的引入类的定义类的两种定义方式&#xff1a; 类的访问限定符及封装访问限定符 封装类的作用域类的实例化类对象模型如何计算类对象的大小结构体内存对齐规则&#xff1a; this指针 面向过程和面向对象初步认识 C语言是面向过程的&…...

Exchanger的 常用场景及使用示例

Exchanger的 常用场景及使用示例 Exchanger是Java并发包中的一个工具类&#xff0c;它用于两个线程之间交换数据。当两个线程都到达同步点并调用exchange()方法时&#xff0c;它们会交换数据然后继续执行。Exchanger特别适用于那些需要两个线程进行协作&#xff0c;交换数据或…...

Spring AI项目Open AI对话接口开发指导

文章目录 创建Spring AI项目配置项目pom、application文件controller接口开发接口测试 创建Spring AI项目 打开IDEA创建一个新的spring boot项目&#xff0c;填写项目名称和位置&#xff0c;类型选择maven&#xff0c;组、工件、软件包名称可以自定义&#xff0c;JDK选择17即可…...

决策规划仿真平台的搭建

以下内容笔记据来自于b站up主忠厚老实的老王&#xff0c;视频&#xff1b;链接如下&#xff1a; 自动驾驶决策规划算法第二章第一节 决策规划仿真平台搭建_哔哩哔哩_bilibili 使用到的软件有matlab、prescan、carsim以及visual stadio。 我电脑上软件的版本是matlab2022a&am…...

RustGUI学习(iced/iced_aw)之扩展小部件(十八):如何使用badge部件来凸显UI元素?

前言 本专栏是学习Rust的GUI库iced的合集,将介绍iced涉及的各个小部件分别介绍,最后会汇总为一个总的程序。 iced是RustGUI中比较强大的一个,目前处于发展中(即版本可能会改变),本专栏基于版本0.12.1. 概述 这是本专栏的第十八篇,主要讲述badge标记部件的使用,会结合实…...

触摸播放视频,并用iframe实现播放外站视频

效果&#xff1a; html: <div:style"{ height: homedivh }"class"rightOne_content_div_div"mouseenter"divSeenter(i)"mouseleave"divLeave(i)"click"ItemClick(i)"><!-- isUser是否是用户上传 --><divv-if…...

接口自动化-requests库

requests库是用来发送请求的库&#xff0c;本篇用来讲解requests库的基本使用。 1.安装requests库 pip install requests 2.requests库底层方法的调用逻辑 &#xff08;1&#xff09;get / post / put / delete 四种方法底层调用 request方法 注意&#xff1a;data和json都…...

队列的实现与OJ题目解析

"不是你变优秀了, 那个人就会喜欢你." 文章索引 前言1. 什么是队列2. 队列的实现3. OJ题目解析4. 总结 前言 感情可以培养是个伪命题. 如果有足够多的时间和爱, 就可以让另一个人爱上你的话, 那谁和谁都可以相爱了. 爱情之所以会让人死去活来, 是因为, 答案都写在了…...

中北大学软件学院javaweb实验三JSP+JDBC综合实训(一)__数据库记录的增加、查询

目录 1.实验名称2.实验目的3.实验内容4.实验原理或流程图5.实验过程或源代码&#xff08;一&#xff09;编程实现用户的登录与注册功能【步骤1】建立数据库db_news2024和用户表(笔者使用的数据库软件是navicat)【步骤2】实现用户注册登录功能(与上一实验报告不同的是&#xff0…...

ABB机器人Profinet通信实战:如何正确传输Real类型数据(附完整代码示例)

ABB机器人Profinet通信实战&#xff1a;Real类型数据的高效传输与解析 在工业自动化领域&#xff0c;ABB机器人与PLC之间的实时数据交互是产线高效运行的关键。Profinet作为工业以太网标准协议&#xff0c;其通信性能直接影响着生产节拍和系统稳定性。而Real类型数据的传输&…...

忍者像素绘卷多场景应用:微信小程序插图、游戏素材、社交配图一站式生成

忍者像素绘卷多场景应用&#xff1a;微信小程序插图、游戏素材、社交配图一站式生成 1. 像素艺术的新纪元 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工作站&#xff0c;它将传统像素艺术与现代AI技术完美结合。这款工具特别适合需要快速生成高质量像素风格图像…...

从MATLAB/Python代码实现反推Newmark-β法:理解线性加速度假设如何变成迭代算法

从代码实现反推Newmark-β法&#xff1a;线性加速度假设的工程实践指南 在结构动力学分析中&#xff0c;地震响应、风荷载等时程分析问题常需要求解二阶微分方程。Newmark-β法作为经典数值解法&#xff0c;通过线性加速度假设将连续问题离散化。但教科书往往止步于公式推导&am…...

Qwen3-VL-30B部署避坑指南:从下载到运行一气呵成

Qwen3-VL-30B部署避坑指南&#xff1a;从下载到运行一气呵成 1. 为什么选择Qwen3-VL-30B Qwen3-VL-30B是目前通义千问系列中最强大的视觉-语言模型&#xff0c;它在多个方面实现了显著提升&#xff1a; 更优秀的文本理解和生成&#xff1a;能够处理复杂语义和长文本更深入的…...

MAA游戏助手:如何让《明日方舟》的日常任务自动完成?

MAA游戏助手&#xff1a;如何让《明日方舟》的日常任务自动完成&#xff1f; 【免费下载链接】MaaAssistantArknights 《明日方舟》小助手&#xff0c;全日常一键长草&#xff01;| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: h…...

保姆级教程:在Ubuntu 24.04上用QEMU桥接网络,让虚拟机秒连外网

在Ubuntu 24.04上实现QEMU虚拟机与宿主机网络互通的终极指南 对于需要在本地环境测试国产操作系统或运行隔离开发环境的开发者来说&#xff0c;QEMU虚拟化方案因其轻量高效而备受青睐。但让虚拟机与宿主机网络互通往往成为新手的第一道门槛。本文将彻底解决这个问题——通过桥接…...

告别NMS!用RT-DETR在1080Ti上跑出108FPS的实时目标检测(保姆级部署教程)

在1080Ti上实现108FPS的RT-DETR实时目标检测实战指南 当目标检测遇上Transformer架构&#xff0c;一场关于速度与精度的革命正在悄然发生。RT-DETR作为DETR家族的最新成员&#xff0c;不仅继承了端到端集合预测的基因&#xff0c;更通过一系列创新设计突破了实时检测的瓶颈。本…...

从LVGL V7.11到V9.1:我维护中文文档这三年踩过的坑与实战经验

从LVGL V7.11到V9.1&#xff1a;一个中文文档维护者的技术叙事 三年前&#xff0c;当我第一次在嵌入式项目中尝试使用LVGL时&#xff0c;完全没想到这个轻量级图形库会成为我技术生涯中的重要篇章。作为国内最早系统维护LVGL中文文档的开发者之一&#xff0c;这段跨越三个大版本…...

tomcat和国产web中间件区别和联系

国产中间件 宝蓝德 https://www.bessystem.com/product/e717be5b091e4e14a7339aa4be49ca80/info?p101东方通 https://www.tongtech.com/sy.html非国产tomcat tomcat的项目发布方式 将项目复制到tomcat/webapps中启动Tomcat服务器&#xff0c;双击 startup.bat访问项目 IDEA 中…...

OpCore-Simplify:开源系统硬件适配自动化的技术突破

OpCore-Simplify&#xff1a;开源系统硬件适配自动化的技术突破 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 在开源系统定制领域&#xff0c;硬件兼…...