xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

css parent color depend child status All In One

css parent color depend child status All In One

CSS :has selector

div{
  background: #fff;
  color: #000;
  border: 1px solid red;
  width: 200px;
  height: 200px;
}

.parent:has(> p.child) {
  background: #000;
  color: #0f0;
}

Global 0%, 不支持 ❌

https://caniuse.com/?search=CSS %3Ahas

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

demo

https://css-tricks.com/the-css-has-selector/

https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element

refs



©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @   xgqfrms  阅读(35)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2021-02-21 Vue filter All In One
2021-02-21 Vue 3.x Composition API All In One
2021-02-21 Vue mixin All In One
2021-02-21 Vite 2.x All In One
2021-02-21 js tada or confetti animation effect All In One
2021-02-21 DOM0 & DOM1 & DOM2 & DOM3 & DOM4 All In One
2019-02-21 emoji & click copy All In One
点击右上角即可分享
微信分享提示