技术栈

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
相关推荐
余人于RenYu
17 小时前
Claude + Figma MCP
前端·ui·ai·figma
杨艺韬
20 小时前
vite内核解析-第2章 架构总览
前端·vite
我是伪码农
20 小时前
外卖餐具智能推荐
linux·服务器·前端
2401_88588504
20 小时前
营销推广短信接口集成:结合营销策略实现的API接口动态变量填充方案
前端·python
小李子呢0211
21 小时前
前端八股性能优化(2)---回流(重排)和重绘
前端·javascript
程序员buddha
21 小时前
深入理解ES6 Promise
前端·ecmascript·es6
吴声子夜歌
21 小时前
ES6——Module详解
前端·ecmascript·es6
剪刀石头布啊
1 天前
原生form发起表单干了啥
前端
剪刀石头布啊
1 天前
表单校验场景,如何实现页面滚动到报错位置
前端
gyx_这个杀手不太冷静
1 天前
大人工智能时代下前端界面全新开发模式的思考(二)
前端·架构·ai编程
热门推荐
012026年4月技术前沿:AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点03一周AI热点速览(2026.03.31-04.06):GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04GPT-6核心能力解析及与现有主流大模型对比05基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南06零成本!Ollama本地部署国产大模型全指南(支持Kimi-K2.5/GLM-5/Qwen,新手秒上手)07免费!不限量!用opencode接入英伟达(NVIDIA)大模型,轻松打造你的 AI 编程助手08从限购到畅通:GLM-5.1 Coding Plan接入攻略09AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析10CodeBuddy与WorkBuddy深度对比:腾讯两款AI工具差异及实操指南