大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

使用 :has() 选择器可以让开发者能够根据子元素来设置父元素的样式，其解决了 CSS 中长期存在的限制，即无法根据元素内容设置元素样式。

更加直白的说，尽管 CSS 支持根据父元素对子元素进行样式设置，但到目前为止，反向操作还无法实现。而 :has() 选择器为动态、内容感知的样式设置带来了新的可能性。:has() 伪类通过将相对选择器列表作为参数，提供了一种根据参考元素选择父元素或先前兄弟元素的方法。

/* 选择一个 h1 标题，其后跟着一个 p 元素，并将样式应用于 h1*/
h1:has(+ p) {
  margin-bottom: 0;
}

:has() 选择器消除了以前需要使用 JavaScript 或复杂 CSS 的场景，同时与其他用于检查状态、位置和组合的选择器结合使用时功能会更加强大：

/* 带有链接的段落样式 */
p:has(a) {
  padding-right: 1.5em;
  background: url(external-link.svg) no-repeat right;
}
/* 表单组中存在无效输入 */
.form-group:has(input:invalid) {
  border-left: 3px solid red;
}
/* h2 标题后紧跟段落 p */
h2:has(+p) {
  margin-bottom: 0.5em;
}

同时，:has() 选择器还可以用于启用响应内容结构的自适应布局：

.grid {
  display: grid;
  gap: 1rem;
}
/* 如果任何卡片内容较长，则切换到单列 */
.grid:has(.card> p:has(+ p)) {
  grid-template-columns: 1fr;
}
/* 当卡片有图像时添加额外的间距 */
.grid:has(.card:has(img)) {
  gap: 2rem;
}

该方法消除了手动管理 class 或 JavaScript 干预以进行布局调整的需要。其从根本上改变了 CSS 架构，即能够根据子元素对父元素进行样式设置，为常见布局开辟了强大、可维护的方法。

现代浏览器都很好地支持 :has()，并允许生产部署。如果浏览器不支持 :has() 伪类则整个选择器块无效，除非 :has() 位于特殊的选择器列表中，例如: is() 和 :where()。

//  :is() 选择参数列表中选择器可以选择的任何元素
:is(ol, ul) :is(ol, ul) ol {
  list-style-type: lower-greek;
  color: red;
}
//  :where() 选择参数列表可以选择的任何元素
:where(ol, ul) :where(ol, ul) ol {
  list-style-type: lower-greek;
  color: chocolate;
}

 :where() 和 :is() 之间的区别在于 :where() 始终具有 0 特异性，强调的是目标元素选择而非提升优先级，而 :is() 则采用其参数中最具体的选择器特异性。

对于较旧的浏览器，推荐开发者使用打底样式：

/* 基础样式 */
.card {padding: 1rem;}
/* 针对支持 :has() 的浏览器增强样式 */
@supports selector(:has(*)) {
  .card:has(img) { padding: 0; }
}

一个常见的示例是：用 :has() 选择器替换基于 JavaScript 的样式切换（toggle），然后逐渐转向内容感知布局。

参考资料

https://www.trevorlasn.com/blog/has-css-functional-pseudo-class

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

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

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

https://brackets-hub.com/the-power-of-has-in-css/

https://medium.com/@codeyourthoughts48/css-has-selector-a-brief-overview-8d1ef2c5c656

https://thetechplatform.medium.com/what-is-css-has-selector-38b3aee9fbdf

思凡资源网

为何说 :has() 选择器是对CSS架构的重塑?

参考资料