【高频考点精讲】CSS :has()选择器实战：这个强大的父选择器能做什么？

本文链接：https://blog.csdn.net/liuyun_12138/article/details/147767040

CSS :has()选择器实战：这个强大的父选择器能做什么？

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

各位前端er们好，我是全栈老李。今天咱们聊一个CSS新特性，它就像个"侦探选择器"——:has()。这玩意儿在Chrome 105+已经稳定支持了，但很多同学可能还没玩明白它的骚操作。

想象一下，你是个班主任（父元素），想找出班里所有带红领巾（子元素）的学生，然后给他们发小红花。以前CSS只能通过子元素找父元素（用后代选择器），现在:has()让你可以直接说："嘿，所有带着红领巾的同学，站出来！"——这就是父选择器的魔力。

基础语法：比相亲条件还严格

/* 选择包含 <img> 子元素的 <div> */
div:has(img) {
   
   
  border: 2px solid blue;
}

/* 选择包含类名为.active的子元素的列表项 */
li:has(.active) {
   
   
  background-color: lightgreen;
}

（代码注释：全栈老李提醒——这里的冒号是英文的，写错会直接失效哦）

这个选择器读起来就像说人话："给我找出那些有XXX孩子的家长"。它比隔壁大妈介绍对象时的条件还具体："我要找家里有房（:has(.house)）、有车（:has(.car)）、还得养猫（:has(.cat)）的单身汉"。

实战代码：让UI自己会"思考"

场景1：表单智能提示

<div class="form-group">
  <input type="text" required>
  <span class="error-message">不能为空！</span<