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类时,父元素的样式发生了改变

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

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

相关文章

人机协同中的比较、调整与反转

人机协同是指人与机器之间的合作关系&#xff0c;通过共同努力实现特定任务的目标。在人机协同中&#xff0c;存在着比较与调整的过程&#xff0c;这是为了实现更好的合作效果和任务完成质量。 比较是指人与机器在任务执行过程中对彼此的表现进行评估和比较。这可以通过对机器的…

vue+ts+vite+pinia+less+echarts 前端可视化 实战项目

1.初始化前端 输入 npm init vuelatest 命令 然后 选择需要的插件2.构建完成后 在终端切换到vue-project文件夹下 npm install 下载依赖 3.下载 less样式 npm install less less-loader -D 4.下载axios npm install axios 5.下载echarts npm install echarts -S 6.引入中国…

战网国际服加速器用哪个好 暴雪战网好用加速器介绍

战网国际版&#xff0c;又称Battle.net环球版&#xff0c;是暴雪娱乐操盘的全球性游戏互动平台&#xff0c;它跨越地理界限&#xff0c;服务于全球游戏爱好者。与地区限定版本相异&#xff0c;国际版赋予玩家自由进入暴雪旗下众多经典游戏的权利&#xff0c;无论身处何方&#…

对比测评3款BI分析工具

前不久&#xff0c;一位准备入职阿里的学弟问我&#xff0c;他要做电商数据分析&#xff0c;电商有庞杂的标签、模型、数据和业务逻辑&#xff0c;菜鸟应该要具备什么样的分析能力啊&#xff1f; 我看了他的岗位职责&#xff0c;主要是负责经营决策支持、专题分析和数据看板搭…

leetcode-字符串变形-104

题目要求 思路 1.首先根据ASCII的规则&#xff0c;把字符串大小写替换&#xff0c;空格保持不变 2.将整个字符串进行翻转 3.以空格为区间&#xff0c;将区间内的字符串进行翻转&#xff0c;其中翻转的函数reverse() 代码实现 class Solution { public:string trans(string s…

【C语言】通讯录系统实现

目录 1、通讯录系统介绍 2、代码分装 3、代码实现步骤 3.1制作菜单函数以及游戏运行逻辑流程 3.2、封装人的信息PeoInfo以及通讯录Contact结构体类型 3.3、初始化通讯录InitContact函数 3.4、增加联系人AddContact函数 3.5、显示所有联系人ShowContact函数 3.6、删除联系人D…

Shell之常用命令

目录 1.排序工具--sort命令 1.1 快读查找一个目录中最大文件 2.去重工具--uniq命令 2.1 分析判断远程登录错误次数&#xff0c;禁止该用户远程登录 3.修改工具--tr命令 4.列截取工具--cut命令 5.分割文件工具--split命令 6.合并文件列--paste命令 7.扫描工具--eval命令…

【Linux】常用指令、热键与权限管理

一、常用指令 &#xff08;1&#xff09;ls 功能&#xff1a;列出指定目录下的所有子目录与文件 用法&#xff1a;ls &#xff08;选项&#xff09; &#xff08;目录或文件名&#xff09; 常用选项&#xff1a; -a&#xff1a;列出目录下的所有文件&#xff0c;包括隐藏…

c语言中数字字符串和数字互转

#include <getopt.h> #include <stdio.h> #include <stdlib.h>#define MAX_PATH 256 char filename[MAX_PATH 5]; int main(int argc, char** argv) {//数字字符串转数字const char* kk "689";int zhi atoi(kk) 8;//数字字符串转doubledoub…

代码随想录训练营Day 29|力扣39. 组合总和、40.组合总和II、131.分割回文串

1.组合总和 题目链接/文章讲解&#xff1a; 代码随想录 视频讲解&#xff1a;带你学透回溯算法-组合总和&#xff08;对应「leetcode」力扣题目&#xff1a;39.组合总和&#xff09;| 回溯法精讲&#xff01;_哔哩哔哩_bilibili 代码&#xff1a;&#xff08;未剪枝版 &#xf…

ChatGPT未来可能应用于iPhone?

苹果接即将与OpenAI达成协议 ChatGPT未来应用于iPhone 前言 就在5月11日&#xff0c;苹果公司正与OpenAI进行深入讨论&#xff0c;计划在其最新的iOS操作系统中整合OpenAI的先进技术。这一举措是苹果公司在为其产品线融入更先进的人工智能功能所做努力的一部分。 目前情况双方…

vue2 八大组件通信,父子通信,跨层级通信,事件总线,vuex等

文章目录 什么是组件通信&#xff1f;父子通信流程propsProps 定义Props 作用特点数组写法对象写法&#xff08;props校验&#xff09;简写只验证数据类型&#xff1a;完整写法&#xff0c;完整的验证&#xff1a; props父向子传值用props父传子在子组件中修改props $emit子向父…

自定义 Gradle 插件进行统一的静态代码分析

静态代码分析是一项了不起的技术, 它能让代码库更易于维护. 但是, 如果你在不同的版本库中拥有多个服务(可能由不同的团队开发), 如何才能让每个人都遵循既定的代码风格呢? 一个好办法是将所有规则封装在一个插件中, 该插件会在每个项目构建时自动执行所需的验证. 因此, 在本…

最新版rancher环境配置安装和集群搭建详细教程记录

&#x1f680; 作者 &#xff1a;“二当家-小D” &#x1f680; 博主简介&#xff1a;⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人&#xff0c;8年开发架构经验&#xff0c;精通java,擅长分布式高并发架构,自动化压力测试&#xff0c;微服务容器化k…

BGP学习三:BGP路由优选12条规则,闪亮登场啦啦啦啦啦

目录 一.BGP策略工具 &#xff08;1&#xff09;Router-policy作用 &#xff08;2&#xff09;组成部分 &#xff08;3&#xff09;router-policy注意事项 二.优选规则 ①丢弃下一跳不可达 (1)优选prefered-value值大的路由 1.首选优先级 (2)优选local-preference(本地…

Fast-Poisson-Image-Editing代码介绍(二)

目录 2.fpei文件下 2.6 number_solver.py 2.7 process.py 2.8 taichi_solver.py 3. 算法总结 4. 代码运行 4.1 测试 4.2 基于GUI后端自定义框输出编辑图像结果 4.2.1 下载open-cv 4.2.2 输入命令 4.2.3 自定义框 4.2.4 按ESC退出 接续Fast-Poisson-Image-Editing代码…

企业研发必备网络:这些关键特性,你get了吗?

对于以研发为核心的企业&#xff0c;如软件开发、生物制药、智能汽车等&#xff0c;安全、稳定的研发网络可是他们业务发展不可或缺的。那么&#xff0c;这些研发网络究竟有哪些独特之处&#xff0c;又能为企业带来哪些价值呢&#xff1f; 首先&#xff0c;我们知道企业研发常常…

开放式耳机哪款具有高性价比?5款高分开放式耳机倾力推荐

作为多年的耳机发烧友&#xff0c;强烈给你们安利开放式耳机&#xff0c;真的是舒适耐用&#xff0c;性价比高。开放式耳机以其独特的不入耳设计&#xff0c;给用户带来了最舒适的佩戴感受。如果小白还不知道怎么选择高性价比的开放式耳机那就看看我的总结吧&#xff01;下面就…

前端面试题(二十三)(答案版)

面试形式&#xff1a;线上电话面试&#xff1a;一面&#xff1a;时长30分钟 面试评价&#xff1a;精准考察项目所需技术理论工作实践 面试官的提问大纲&#xff1a;本公司项目要求本人简历 工作经验&#xff1a;2-4年 公司名称&#xff1a;深圳XX&#xff08;想知道的就滴喔…

冯喜运:5.15黄金原油晚盘分析:鲍威尔再放鹰,降息悬念重重

【黄金消息面分析】&#xff1a;在全球经济动荡和通胀预期不断上升的背景下&#xff0c;黄金作为传统的避险资产&#xff0c;再次成为投资者关注的焦点。当前&#xff0c;黄金价格交投于2370美元/盎司左右&#xff0c;连续两日日线呈现上涨趋势&#xff0c;而白银价格也在连续三…