技术栈

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
相关推荐
醉酒的李白、
几秒前
Vue3 组件通信本质:Props 下发,Emits 回传
前端·javascript·vue.js
anOnion
15 分钟前
构建无障碍组件之Window Splitter Pattern
前端·html·交互设计
NotFound486
25 分钟前
实战分享Python爬虫,如何实现高效解析 Web of Science 文献数据并导出 CSV
前端·爬虫·python
徐小夕
1 小时前
PDF无限制预览!Jit-Viewer V1.5.0开源文档预览神器正式发布
前端·vue.js·github
WangJunXiang6
1 小时前
Haproxy搭建Web群集
前端
吴声子夜歌
1 小时前
Vue.js——自定义指令
前端·vue.js·flutter
小芝麻咿呀
1 小时前
vue--面试题第一部分
前端·javascript·vue.js
这儿有一堆花
2 小时前
深入解析 Video.js:现代 Web 视频播放的工程实践
前端·javascript·音视频
烤麻辣烫
3 小时前
JS基础
开发语言·前端·javascript·学习
热门推荐
012026年4月技术前沿:AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026 年 AI 编程助手全面对比评测:Cursor vs Copilot vs Claude Code vs GitHub Copilot Free04AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析05零成本!Ollama本地部署国产大模型全指南(支持Kimi-K2.5/GLM-5/Qwen,新手秒上手)06从零部署 Hermes Agent:一只"会成长的 AI 马"保姆级安装教程07GPT-6发布日深度解析-Symphony架构200万Token实战08基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南09从旧版到 v0.20.5:Ollama 升级避坑全流程(附命令复制即用)10从限购到畅通:GLM-5.1 Coding Plan接入攻略