CSS :has() 伪类，父级选子级超方便！

博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》CSS :has() 伪类父级选子级超方便目录昨晚写组件又掉坑了。想让卡片在有“关闭按钮”时自动加阴影。写了个样式.card:has(.close-btn){box-shadow:0010pxrgba(0,0,0,0.3);}结果阴影没出来。浏览器控制台干干净净就是不生效。气得想砸键盘。核心根源不是写错了。是浏览器不支持:has()。Chrome 105、Safari 16.4 才支持。我用的Edge是最新版居然能用。但公司老项目还在用Chrome 100以下直接凉透。解决代码用:has()真香。看这个对比/* 传统方法必须加额外类 *//* HTML里得写成 div classcard has-close */.card.has-close{box-shadow:0010pxrgba(0,0,0,0.3);}/* 现在直接用 :has() */.card:has(.close-btn){box-shadow:0010pxrgba(0,0,0,0.3);/* 说明只要.card里有.close-btn就触发 */}/* HTML 无需改动 */divclasscardbuttonclassclose-btnX/button/div关键点:has() 选择父级基于子级是否存在。不用改HTML加类不用写JS。直接干爽避坑总结兼容性别在IE或老Chrome用。用caniuse.com查支持度。2023年了移动端基本能用但PC端得加兜底。性能别乱写复杂选择器。:has(ul li)比:has(li)慢3倍。测试过1000个元素时卡顿明显。选择器限制:has() 里只能放简单选择器。不能写:has(ul:has(li))会报错。正确写法:has(ul li)吐槽“以前写CSS像在走迷宫现在:has()直接开挂。”“但浏览器支持真坑昨天被QA问‘为什么在安卓4.4上不显示’我直接沉默。”最后:has() 用对了代码量砍一半。但记住先查兼容性再写。别像我一样调试到凌晨三点才发现是浏览器问题。现在去改你的CSS吧。别忘了浏览器更新了再试