技术栈

css 如何根据子元素给他的父元素设置样式

夏天想2024-10-24 20:05

<div class="parent">

<div :class="{ flag ? 'active' : 'unactive' }">子元素啊根据一个变量来加样式</div>

</div>

这个时候如何根据子元素来给这个parent加样式呢?

其中能马上想到的就是:这个class的判断可以加在parent后面,但是如果不改变外层内容只是修改css呢。

这个时候我们可以用到:has

.parent:has(.active){

color:red;

}
.parent:has(.unactive){

color:yellow;

}

上一篇:c++ pdf文件提取txt文本示例
下一篇:ansible批量部署apache
相关推荐
小李子呢0211
34 分钟前
前端八股网络浏览器---输入 URL 到页面呈现
前端·网络
小李子呢0211
35 分钟前
前端八股CSS---CSS布局
css·html·css3
Hello--_--World
1 小时前
Vue:虚拟Dom
前端·javascript·vue.js
vivo互联网技术
1 小时前
下一代图片格式 AVIF 在 vivo 社区的落地实践
前端·性能优化·图片压缩·avif
咸鱼翻身更入味
1 小时前
Vue创建一个简单的Agent聊天
前端
布局呆星
2 小时前
Vue Router 核心知识点梳理
前端·javascript·vue.js
得物技术
2 小时前
基于 Harness + SDD + 多仓管理模式的 AI 全栈开发实践|得物技术
前端·人工智能·后端
不会写DN
2 小时前
如何通过 Python 实现招聘平台自动投递
开发语言·前端·python
miaowmiaow
2 小时前
一行命令把 PSD 还原成 HTML / React / Vue:psd2code 实战干货
前端·ai编程
热门推荐
01要裂开了!ChatGPT要手机号验证了?注册Codex要求验证电话号码怎么办?2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03Codex 接入 DeepSeek API 完整配置文档04零基础教你claude code 接入 deepseek V405Linux 核弹级高危漏洞 CVE-2026-31431 完整修复指南06CVE-2026-31431 (Copy Fail) 漏洞复现与验证记录07【AI】2026 年具身智能模型和世界模型总结08裂开!ChatGPT 居然开始要手机号验证,附详细解决方法09CC-Switch & Claude 基于 Linux 服务器安装使用指南102026 年 AI 辅助编程工具全景对比:Copilot、Cursor、Claude Code 与 Codex 深度解析