你还在给每个图片父元素加类名？CSS :has() 让选择器“逆天改命”

2026-03-31 1 飞机号购买网站

:has()是什么

在CSS选择器历经的漫长发展进程里面，过去的时候仅仅能够从父元素着手去选择子元素，从兄弟元素出发去选择相邻兄弟。然而，:has()的出现成功打破了这样的一种常规状态，它属于关系伪类的范畴，其允许凭借元素的后代或者后续兄弟元素来匹配该元素。其语法形式犹如去询问元素当中是不是存在符合相关条件的子元素，并且在其内部能够书写复杂的选择器，甚至于还可以进行:has()的嵌套操作。

实战场景一：卡片加样式

在以往，当碰到那种有着包含图片的这样一种卡片并且还要添加某种特殊样式的这种需求发生的时候，通常情况下都是需要去使用JS的。而现在呢，有了:has()之后，仅仅只是带有图片的那些卡片就会获取到橙色的左边框了，进行这样的操作是既干净又利落的，并且根本就不需要额外再去编写JS代码了。如此一来，能够让代码变得更加简洁，在进行维护的时候也会更加方便一些。

实战场景二：表单实时校验

以前采用JS去监听每一个input，随后给父级增添类名以此来达成表单实时校验，现在运用:has()能够让校验反馈更为优雅，不需要繁杂的JS监听，便可以实现表单的实时校验，极大地提高了开发效率。

/* 选择所有包含  元素的  */
figure:has(img) {
  border: 2px solid gold;
}
/* 选择所有包含 .error-message 的表单 */
form:has(.error-message) {
  border: 1px solid red;
  background-color: #ffeeee;
}

实战场景三：空状态提示


  标题
  一些文字...
  


  标题
  没有图片的卡片

存在这样一种:not(:has(...))组合，它所表达的意思是“没有子元素满足条件”，这种组合在处理那空状态提示的时候是非常有用的。当页面呈现出空状态之际，它能够迅速且精准地给出提示，进而提升用户体验。

.card:has(img) {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-left: 4px solid #ff8800;
}

实战场景四：兄弟元素影响

/* 如果有无效输入框，给表单加个红框 */
form:has(input:invalid) {
  border: 2px solid red;
  padding: 10px;
}
/* 如果有被选中的复选框，给父级加个标记 */
fieldset:has(input[type="checkbox"]:checked) {
  background-color: #e0ffe0;
}

:has()不但能够挑选祖先，而且还可以挑选兄弟元素，借助 + 组合器，像 h2:has(+ p) 能够选中后面存在 p 的 h2，这为元素之间的联动供给了全新的达成途径。

/* 如果列表里没有 li，显示空状态提示 */
ul:not(:has(li))::after {
  content: "暂无数据";
  display: block;
  color: #999;
  text-align: center;
}

实战场景五：多级嵌套选择

/* 如果 h2 后面紧跟着 p，给 h2 加下划线 */
h2:has(+ p) {
  text-decoration: underline;
}

嵌套的:has()宛如XPath那般，具备强大无比的威力。于处理多级嵌套的元素之际，它能够精确无误地依据子元素的状态来挑选父元素，进而让样式的控制变得更为灵活自如。

/* 如果某个 section 里有一个 article，且 article 内有 img，给 section 加背景 */
section:has(article:has(img)) {
  background: #fafafa;
}

性能与兼容问题

:has()属于CSS选择器Level 4的范畴，在2023年往后的主流浏览器当中，像Chrome 105+、Edge 105+等基本上都能够予以支持，然而老浏览器需要进行降级处理。与此同时，:has()被称作“昂贵的选择器”，不过现在的浏览器已经做了优化，妥善地使用并不会对性能产生影响，在使用的时候应当防止滥用，限定范围能够提升效率。

其他新选择器

跟：has()处于同一时期或者略微更早的时候，CSS另外引入了新的特性，这些不一样的新特性正在将CSS从“声明式样式表”转变为“轻量级逻辑引擎”，从而增强了CSS的功能。

CSS不再“残疾”

过去曾觉得CSS并非编程语言，然而，:has()赋予了CSS“条件判断”的本事，它能够依据子元素来确定父元素的样式，如此一来，就能减少诸多JavaScript类名操作，进而让样式变得更为纯粹、更具内聚性。虽说兼容性尚未达到100%，不过在现代项目当中值得一试。

存在于项目里面的，还有哪些是借助 JS 去实现会产生麻烦，然而 CSS 新特性却能够不费吹灰之力就解决掉的问题呀，赶紧来到评论区域进行分享，可别忘了给本文点赞以及分担哦！