当前位置: 首页 > 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类时,父元素的样式发生了改变

http://www.lryc.cn/news/349814.html

相关文章:

  • onnx转trt时,关于动态shape自动配置默认值的脚本
  • 实验室无法培养的菌,原来可以这么研究!
  • Xed编辑器开发第一期:使用Rust从0到1写一个文本编辑器
  • 农业自动气象监测站:赋能智慧农业的新动力
  • 2-6 任务 猜数小游戏(单次版)
  • springboot 定时任务解决方案
  • 谷粒商城实战(024 业务-订单模块-分布式事务1)
  • .NET使用Microsoft.IdentityModel.Tokens对SAML2.0登录断言校验
  • 性能测试学习二
  • 小丑的身份证和复印件 (BFS + Floyd)
  • C++类与对象(上)
  • Exchanger的 常用场景及使用示例
  • Spring AI项目Open AI对话接口开发指导
  • 决策规划仿真平台的搭建
  • RustGUI学习(iced/iced_aw)之扩展小部件(十八):如何使用badge部件来凸显UI元素?
  • 触摸播放视频,并用iframe实现播放外站视频
  • 接口自动化-requests库
  • 队列的实现与OJ题目解析
  • 中北大学软件学院javaweb实验三JSP+JDBC综合实训(一)__数据库记录的增加、查询
  • 高通QCS6490开发(一): 广翼智联FV01 AI板卡简介
  • 【知识拓展】大白话说清楚:IP地址、子网掩码、网关、DNS等
  • Java 高级面试问题及答案2
  • 2024年网络安全威胁
  • 应用层之 HTTP 协议
  • 解决Word文档中页眉有部分有,有部分没有的问题
  • Python爬虫基础知识学习(以爬取某二手房数据、某博数据与某红薯(书)评论数据为例)
  • JavaScript-输入输出语句
  • peft+llama3训练自定义数据
  • vue+ts+vite+pinia+less+echarts 前端可视化 实战项目
  • 文心一言指令多样化,你知道的有哪些?