CSS 的父选择器:has()

W3C 的 Selectors Level 4 新增了很多强大的 CSS 选择器。早在 2018 年年底就在《初探CSS 选择器Level 4》一文中和大家一起探讨了这些选择器。在这些新选择器中，最为有意思的是“逻辑组合选择器”，即 “任意匹配伪类选择器:is()、否定（匹配无）伪类选择器:not()、选择器权生调整伪类选择器:where()和关系性（父选择器）伪类选择器:has() 。尤其是关系性伪类选择器:has()，它和 CSS 容器查询在近十多年来一直成为 Web 开发者期待的 CSS 功能之一。

在这篇文章中，我将和大家一起来探讨什么是关系性伪类选择器（又称父选择器）以及它是如何工作的，并且将会通过一些示例来阐述该选择器可以在哪里，最重要的是我们现在如何使用它。

曾在《初探CSS 选择器Level 4》和《CSS 选择器:is() 和 :where() 与 :has() 有什么功能》两篇博文中介绍过新增的逻辑组合选择器，感兴趣的可以先一睹为快！

简单聊一下 CSS 选择器

稍微了解 CSS 的同学都知道，要想给页面添加样式，就得使用 CSS 选择器 来选中 DOM 元素，否则添加的样式就无法运用到具体的元素上。选择器相关的知识是 CSS 领域最基础的部分，但涉及选择器的知识也很多，这一点从 W3C 有关于 选择器规范版本迭代的变更中不难发现（现在已更新到第四版本了，即 Selectors Level 4）。

社区中有关于 CSS 选择器介绍的文章也很多，我个人比较喜欢 nana （@nanacodesign）的 《CSS selectors cheatsheet & details》一文，她用图文并茂的方式介绍了 CSS 选择器常见类型：

国内 @张鑫旭 老师有一本专门介绍 CSS 选择器的书：

小站上也陆续也发布了一些关于 CSS 选择器的文章，摘出一些基础和有意思的文章供大家参考：

• CSS选择器：基本选择器
• CSS选择器：属性选择器
• 再聊CSS的属性选择器
• CSS选择器：伪类选择器
• CSS伪选择器：:empty vs :blank
• 初探CSS 选择器Level 4
• CSS 选择器:is() 和 :where() 与 :has() 有什么功能
• 编写高效 CSS 选择器

《图解CSS》系列中有关于 CSS 选择器这一章节正在编写之中，感兴趣的可以关注后续相关更新！

CSS选择器简单，而且种类繁多，但一直以来开发者都希望有一个能选中父选择器类型。那么什么是父选择器呢？感兴趣的请继续往下阅读。

父选择器:has()是什么？

用一句话来描述： :has()选择器是一个关系型伪类选择器，也被称为函数型伪类选择器，它和 :is()、:not() 以及 :where()函数型选择器被称为 CSS的逻辑组合选择器 ！

注意，在规范中并没有父选择器一描述，社区中把:has()描述为“父选择器”是因为这样更形象，也易于理解。

我们先从其他选择器着手来介绍父选择器是什么？

正如 nana 提供的选择器示例所示，CSS 选择器中有很多类型的选择器是和 DOM 结构有关的，比如我们熟悉的 子选择器（a > b） 、 后代选择器（a b） 、 相邻兄弟选择器（a + b） 、 通用兄弟选择器（a ~ b） 、 结构伪类选择器（比如 :nth-child()、:nth-of-type()等） ：

但在这众多的 CSS 选择器中就没有“父选择器”，或许也正因为他的缺失，很多开发者都希望有这样的一个选择器，即，能通过子元素选中其父元素。事实上，社区的开发者从未停止过这方面的探索。比如 Shaun Inman (@shauninman)早在2008年就提出了父选择器的语法规则，即 E < F 。这个语法规则看上去和CSS的子选择器有点相似，只是符号从 > 变成 <了。

<!-- HTML -->
<a href="##">
    <img src="" alt="" />
</a>

/* 子选择器 E > F */
a > img {
    border: 2px solid #09f; /* 选中的是子元素 img */
}

/* 父选择器 E < F */
a < img {
    border: 2px solid #09f; /* 选中的是父元素 a */
}

之后 Remy Sharp（@rem）建议使用一个 :parent 伪元素来表述父选择器的语法：

a img:parent { 
    border: 2px solid #09f; 
}

稍微熟悉CSS选择器的开发者都知道，选择器最右位才是主体，你要样式化的东西（元素）。大多数编写CSS的人，在某种程度上，发现自己想要基于其中的内容来设计样式。按照这个规则来理解的话，@shauninman 和 @rem 提出的父选择器语法规则都超出我们的认知，比如E < F选择器的主体是左侧的E。

后来，Igalia公司的工程师和浏览器内核的工师提出使用 :has() 来定义父选择器的语法规则：

E:has(F) {
    
}

:has() 选择器看上去和 jQuery 中的:has()选择器相似。

我们再来看一下W3C规范是怎么描述:has()选择器：

The relational pseudo-class, :has(), is a functional pseudo-class taking a <forgiving-relative-selector-list> as an argument. It represents an element if any of the relative selectors, when absolutized and evaluated with the element as the :scope elements, would match at least one element.

大致意思是：

关系型伪类:has()是一个函数型伪类，接受一个选择器组（< forgive -relative-selector-list>）作为参数。其给定的选择器参数（相对于该元素的:scope）至少匹配一个元素。

其实，我们可以像理解jQuery中的:has() 选择器那样来理解：

:has()选择器选取所有包含一个或多个元素在其内的元素，匹配指定的选择器。

即，:has()选择器接受一个相对的选择器列表，如果至少有一个其他元素与列表中的选择器相匹配，那么它将代表一个元素。如果这样不好理解，可以通过下面的示例来理解。假设在我们的 HTML 中有两段这样的代码：

<!-- ① 含有卡片缩略图 img -->
<div class="card">
    <img class="card__thumb" src="" alt="" />
    <div class="card__content">
        <h3 class="card__title">Card Title</h3>
        <p class="card__describe">Card Describe</p>
    </div>
</div>

<!-- ② 不含卡片缩略图 img -->
<div class="card">
    <div class="card__content">
        <h3 class="card__title">Card Title</h3>
        <p class="card__describe">Card Describe</p>
    </div>
</div>

① 和 ② 唯一的区别就是，在 ② 代码片段中不包含卡片缩略图 img。如果我们在CSS中使用像下面这段CSS代码：

.card {
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem -0.15rem hsla(0 0% 0% / 55%);
    background-color: #fff;
    padding: 1em 2em;
    min-width: 320px;
}

.card:has(img) {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0 2em 0 0;
}

在支持:has() 浏览器（写这篇文章为止，你可以在 Safari 15.4 或 Chrome Canary 最新版本）中看到下图这样的效果：

其中：

.card:has(img) {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0 2em 0 0;
}

上面这段代码表示的是，含有 img 的 .card 元素重置了 .card 的 padding 值，并且添加了 Flexbox 布局相关的样式。换句话说，.card:has(img) 选择器的意思相当于 .card元素中包含了img元素吗？ 简单地说，在CSS的选择器中有了一个条件判断的逻辑：

if (.card元素包含了img元素) {
    .card {
        display: flex;
        align-items: center;
        gap: 1em;
        padding: 0 2em 0 0;
    }
} else {
    .card {
        padding: 1em 2em;
    }
}

很神奇吧！

父选择器为何会缺失这么久？

父选择器和容器查询特性在近十多年来一直都是众多Web开发者所期待的特性，如果你一直有关注 CSS 状态发展相关的报告，不难发现父选择器和容器查询特性都一直排列前列：

既然“父选择器”众人期待，而且又是那么实用，怎么在 CSS 选择器中一直就没有“父选择器”呢？

正如 Jonathan Snook（@snookca）在2010年的一篇文章中描述的那样，这不仅是因为性能方面的考虑，还因为浏览器引擎渲染文档并将计算样式应用于元素的方式：作为一个流，一个元素接一个元素进入。

上面视频来自于 Ponime 在 YouTube 上发布的视频：Gecko Reflow Visualization - mozilla.org

正如上面视频所演示的那样，当一个元素在浏览器屏幕上渲染出来时，它的父元素以及父元素渲染好的UI样式都已经在那里了。在此之后，重新绘制父节点(以及所有其他父节点)将需要对所有父节点选择器进行另一计算。这样的计算对渲染引擎来说是昂贵的！

曾在《初探 CSS 渲染引擎》和《理解 Web 的重排和重绘》两篇博文中有涉猎过这方面的知识。

之前在整理有关于CSS选择器对性能影响文章（《编写高效 CSS 选择器》）时，发现CSS的通用选择器（*）是效率最低的CSS选择器。也正如乔纳森.斯努克（Jonathan Snook）说，

如果有一个父选择器，那将很容易成为低效率选择器中的新老大。

其理由是，当从页面中动态地添加和删除元素时，可能会导致整个文档需要重新渲染(主要是内存使用方面的问题)，即很容易产生重绘和重排。即使如此，乔纳森.斯努克（Jonathan Snook）仍然很乐观:

我所描述的在技术上并非不可能。事实上，恰恰相反。这只是意味着我们必须处理使用这种特性所带来的性能影响。

这观点后来也得到了 Eric Meyer（@meyerweb）印证，“性能问题可能已经解决了”！Eric Meyer 在 Twitter上发了一条信息，提到了如何避免一直困扰着父选择器给渲染带来的性能问题。

如果对于该话题感兴趣的话，可以直接观看 Byungwoo Lee（@byungwoo_bw）在YouTube发的视频《'has' prototyping status》，视频中对应的 PPT 可以点击这里查阅。Byungwoo Lee 还专门用了两篇文章（《CSS Selectors :has():A way of selecting the parent element》和《How blink tests :has() pseudo class:How to use cache to control :has() complexity》）介绍 :has()的使用、存在问题以及如何使用缓存来控制:has()的复杂性等。

简而言之，浏览器渲染引擎的策略就好像是下象棋一要，应该快速找到如何忽略无关的走法，而不是预测每种走法组合的所有可能结果。对于 CSS 而言，渲染引擎会防止对不相关元素的计算。为了减少应用样式后不相关的重新计算，渲染引擎可以在重新计算期间标记样式是否受到:has()状态更改的影响。

另外，这几年浏览器的渲染引擎已经有了相当大的改进。渲染过程已经被优化到浏览器可以有效地确定哪些需要渲染或更新，哪些不需要，从而为一系列新的和令人兴奋的功能开辟了道路。正因为这些的改进，有机会让 :has() 看到曙光。到目前为止，你可以在 Safari 15.4+ 和 Chrome Canary（写这篇文章时是 103.0.5011.0 版本）可以看到 :has() 效果。同时也希望Firefox和Chrome也能快速跟上。

说个题外话，最早实现 :has() 选择器的浏览是 Safari，正如 Jen Simmons（@jensimmons）在 Twitter 所言：“不要老说Safari总是最后一个。有时我们是第一”。

自从Jen Simmons加入Safari 的Web开发者体验团队之后，Webkit内核在CSS特性上的更新速度较之前有显著的变化。很多新特性都是先在 Safari 上看到的。

父选择器的使用

在 2021年 05 月 Brian Kardell（@briankardell）就宣布，Igalia的团队目前正在制作一个:has()选择器的原型：

Igalia 的团队在浏览器渲染引擎上实现了很多强大的特性，比如 CSS的 Grid、Subgrid、容器查询等。

Brian Kardell 在他的文章《Can I :has()》中提到过：“:has()选择器将作为一个父选择器，但它可能有更广泛的用途，超出了这个范围”。:has()选择器除了像前面的卡片示例所演示的功能之外（根据DOM树中的子元素）还可以根据DOM树中的后续元素的内容或状态来选择元素。也就是说，:has()选择器对于根据 DOM 树中的子元素或后续元素的内容或状态有条件地将样式应用于UI组件是非常有用的。期待已久的:has()选择器可以扩展现有选择器的范围和使用场景，提高CSS的质量和健壮性，并减少对JavaScript的依赖和CSS类的需要。

既然如此，我们先来深入了解一下:has()的使用。我将会通一些简单地示例来向大家展示 :has() 选择器如何使用？

在开始之前，我们回忆一下前面的示例使用了 .card:has(img)，其中放置在:has() 中()的选择器img和在:has()的 :前的选择器.card 是一种包含关系，两者之间的关系又和DOM树结构是有着紧密关联的。如果我们把.card:has(img)选择器换成.card:has(>img)呢？它们分别对应的关系是：

• .card:has(img)表示的是.card元素包含了img元素，该img元素只要是.card的后代元素（包括子元素），则条件就是成立的，也就会选中.card元素
• .card:has(> img)表示的是.card元素包含了img元素，且img元素是.card的子元素，只有这样条件才能成立，才能选中.card元素

把上面的示例稍作调整：

<!-- ① 含有卡片缩略图 img -->
<div class="card">
    <img class="card__thumb" src="" alt="" />
    <div class="card__content">
        <h3 class="card__title">Card Title</h3>
        <p class="card__describe">Card Describe</p>
    </div>
</div>

<!-- ② 不含卡片缩略图 img -->
<div class="card">
    <div class="card__thumb">
        <img src="" alt="" />
    </div>
    <div class="card__content">
        <h3 class="card__title">Card Title</h3>
        <p class="card__describe">Card Describe</p>
    </div>
</div>

① 和 ② 模板对应的DOM树如下所示：

给.card:has(img)和.card:has(>img) 下改变.card的background-color：

.card {
    background-color: #fff;
}

.card:has(img) {
    background-color: #09f;
    color: #fff;
    text-shadow: 1px 1px rgb(0 0 0 / 50%);
}

.card:has(> img) {
    background-color: #f36;
    color: #fff;
    text-shadow: 1px 1px rgb(0 0 0 / 50%);
}

在支持和不支持:has()的浏览器你将看到不一样的效果：

从上图效果来看，.card:has(img)和.card:has(> img) 都符合条件，并且将样式运用到 .card 元素上。当然，我们也要注意其选择器权重的问题，如果我们把 .card:has(img) 和 .card:has(> img) 顺序更换一下：

.card:has(> img) {
    background-color: #f36;
    color: #fff;
    text-shadow: 1px 1px rgb(0 0 0 / 50%);
}

.card:has(img) {
    background-color: #09f;
    color: #fff;
    text-shadow: 1px 1px rgb(0 0 0 / 50%);
}

你可能已经想到了，两个.card的background-color都会是 #09f。这主要是因为，.card:has(img) 和 .card:has(> img) 都符合条件，都会选中.card元素，这个时候谁被运用，就要看选择器权重（0, 1, 1）以及在源码中顺序了。.card:has(img) 出现在.card:has(> img)后面，将会覆盖前面.card:has(>img)样式：

在传给:has()选择器参数时，可以是任何选择器。比如：

/* 选择有 img 作为后代元素的 .card 元素 */
.card:has(img) {}

/* 选择有 img 作为子元素的 .card 元素 */
.card:has(> img) {}

/* 选择有类名为 .card__thumb 作为后代元素的 .card 元素 */
.card:has(.card__thumb) {}

/* 选择有一个 h2 元素后紧跟一个 p 元素的 .card 元素 */
.card:has(h2 + p) {}

/* 选择有一个 h2 元素，且后面有 p 元素的 .card 元素 */
.card:has(h2 ~ p){}

从这些简单的示例代码中不难发现，:has()选择器和否定伪类选择器:not()有点类似，关系型伪类选择器 :has() 有两部分组成：

<target_element>:has(<selector>) { 
    /* ... */ 
}

这两个部分的意思大致是：

• ①：<target_element> 字面意思是“目标元素”，也就是样式规则要样式化的主体。即，它是一个元素的选择器，如果作为参数传递给:has伪类条件得到满足（true），该元素将成为目标。条件选择器的范围是这个元素（<selector>不会离开<target_element>所在的范围）
• ②： <selector>指的是一个用CSS选择器定义的条件，需要满足这个条件才能将样式应用到目标元素<target_element>上

上面我们看到的示例都是展示如何使用:has()选择器来选中目标元素，其实它也可以和其它CSS选择器组合起来使用，用来选中目标元素的子元素或相邻元素。比如：

/* 如果 figure 元素有一个 figcaption 后代元素，则选中 figure 元素中的 img 元素 */
figure:has(figcaption) img {
    /* 样式被运用于 模板② 中的 img */
}

<!-- ① 只有 img -->
<figure>
    <img src="w3cplus.png" alt="The beautiful W3cplus logo." /> <!-- ✗  -->
</figure>

<!-- ② 带有标题的 img -->
<figure>
    <img src="w3cplus.png" alt="The beautiful W3cplus logo." /> <!-- ✔ -->
    <figcaption>W3cplus Logo</figcaption>
</figure>

对于像下图这样的场景，:has()选择器就非常实用了：

再来看一个状态切换的样式变化的示例：

form button {
    /* 按钮默认样式，比如未选中状态的样式 */
}

form:has(input[type="checkbox"]:checked) button { 
    /* 复选框选中状态的按钮样式 */ 
}

上面示例代码中使用:has() 改变按钮 button 样式，比如一个注册表单，只有用户同意相关注册协议（表单中的筛选框被选中），创建账号的按钮才高亮，变成可用状态，否则就是处于禁用状态：

这个示例告诉大家，:has() 可以根据子元素（后代元素）的状态（比如我们熟悉的 :hover、:active、:visited、:focus等）来设计不一样的样式。

你甚至还可以与一些表单验证相关的CSS伪类结合在一起，重新定义表单的样式：

从这几个例子中，可以看出关系型伪类选择器:has()是多么通用、强大和实用。它甚至可以与其他伪类结合起来（比如:not()）创建更复杂的关系选择器。比如：

/* 选择不包含空元素的卡片元素 */
.card:not(:has(*:empty)) {}

/* 选择至少有一个复选框未选中的表单元素 */
form:has(input[type="checkbox"]:not(:checked)){}

/* 选择不包含标题元素的卡片元素 */
.card:not(:has(h1, h2, h3, h4, h5, h6)){}

当 :has() 和 :not() 组合在一起使用的时候，两者的排序非常的重要，即两者的嵌套直接会影响最终匹配的结果。比如下面这两个组合：

/* 匹配不包含任何标题元素的 section 元素 */
section:not(:has(h1, h2, h3, h4, h5, h6)){}

/* 匹配任何包含非标题元素的 section 元素*/
section:has(:not(h1, h2, h3, h4, h5, h6)){}

使用Flexbox布局时，当卡片数量不是列数的倍数时，最后一排卡片宽度会像下面这个视频效果一样变化：

虽然在《如何编写防御式的 CSS》一文中介绍了如何避免这种现象。除此之外，还可以使用:has()伪类选择器与结构型伪类选择器组合在一起，比如：

section > div {
    flex: 1 1 calc((100% - 10px * 2) / 3);
}

section:has(div:nth-child(3n + 1):last-child)::after {
    flex: 1 1 calc(((100% - 10px * 2) / 3) * 2 + 10px);
}

section:has(div:nth-child(3n + 2):last-child)::after {
    flex: 1 1 calc((100% - 10px * 2) / 3);
}

根据在<section> 中的 <div> 元素数量，给section的::after元素设置不同的 flex-basis的值。

注意，示例中的 :nth-child(3n + 1):last-child 和 :nth-child(3n + 2):last-child 是结构伪类选择器的一种特性，这种特性被称为 数量查询（也称为 范围选择器）。这种特性也适用于 :nth-of-type()和:nth-last-of-type 选择器。如果你对该特性感兴趣的话，可以阅读：

• CSS选择器：伪类选择器
• Quantity Queries for CSS
• Using CSS Mod Queries with Range Selectors
• Constructing CSS Quantity Queries On The Fly
• Use Quantity Queries to Make Your CSS Quantity-Aware
• Tidy list using Mod Queries and Range Selectors

上面演示的示例代码大部分都是用来展示如何通过:has()选择器的<selector>参数匹配（选中）目标选择器（目标元素）<target_element>，其实关系型选择器:has()绝不仅限于目标元素的子元素的内容和状态，还可以针对 DOM 树中的相邻元素，有效的地使用它为一个“上一个兄弟选择器”。

注意，我们熟悉的相邻兄弟选择器 + 和通用兄弟选择器 ~ 一般都是用来选择该元素之后的兄弟元素。

比如下面这几个示例：

/* p元素后面紧跟有 img 元素 */
p:has(+img) {  }

/* img 元素后面跟随了没有运用 hidden 类的 figcaption 元素 */
img:has(~figcaption:not(.hidden)) { }

/* label 元素后面跟限了没有焦点状态的 input 元素 */
label:has(~input:not(:focus)) {  }

我们还可以多个:has()以链式方式使用，比如：

/* 匹配同时包含了 h2 和 p 元素的 section 元素 */
section:has(h2):has(p){}

我们可以把上面选择器简写成section:has(h2, p)，用逗号来分隔，即将一个组合选择器传递给了:has()选择器。

另外有一个有意思的地方是，如果你传递给:has()一个无效的选择器时，这个无效的选择器会被忽略，比如：

article:has(h2, p, ::-blahdeath) {
    /* ::-blahdeath 是一个无效的选择器，它会被忽略，最终相当于是 article:has(h2, p) */
}

上面这些示例都是用来告诉大家如何使用:has()这个关系型伪类选择器，从上面的示例中不难发现，它选中的并不仅是父元素，也可以根据匹配条件选择上一个兄弟元素，所以很多CSSer专家以及:has()规范设计者都建议不把 :has()选择器称为父选择器，更为精确或符合规范的称呼是 “关系型伪类选择器”。

我们可以给 :has() 传递任何选择器，也可能是一个组合，但不管传递是简单还是复杂的选择器，它和目标选择器在 DOM 上都有一定的关系，可能是父子、后代或兄弟等关系。而且，它最终将CSS选择器锚定在一个带有:has()伪类的元素上，并防止选择移移动到作为伪类参数传递的元素上。简单地说，它永远被选中的是:has()前面的元素，即 <target_element>元素，传递给他的<selector>只是一个匹配条件。

.card img {
    /* 选中的是 .card 元素下的 img 元素；img 是目标元素 */
}

.card:has(img) {
    /* 选中的是包含了 img 元素的 .card 元素；.card 元素是目标元素 */
}

img + figcaption {
    /* 选中紧跟在 img 元素后面的 figcaption 元素; figcaption 元素是目标元素 */
}

img:has(+figcaption){
    /* 选中后面紧跟了 figcaption 元素的 img 元素; img 元素是目标元素 */
}

到止前为止，我们只能在 Safari 15.4+ 和 Chrome Canary 最新版本 以及即将到来的 Chrome 101版看到 :has() 选择器的效果。要得到所有主流浏览器的支持还是有一段时间。在此期间，我们可以再次使用渐进增强技术，在支持他的浏览器中使用 :has()。在CSS中我们可以使用条件CSS @supports的 selector() 函数来查询:has()是否得到浏览器的支持：

@supports selector(:has(*)) {
    .alert {
        display: none;
    }
}

注意，selector()函数是@supports的一个新增特性，我在编写《图解CSS：条件 CSS》章节时，@supports还没有该特性。它是在 CSS Conditional Rules Module Level 4 中增加的。如果你对这个特性感兴趣，可以阅读 Chris Coyier 的《@supports selector()》一文。

Adam Argyle（@argyleink）在他的推文中提到过，可以像下面这样检测:has()是否得到浏览器支持：

@supports selector(:has(works)) {
    /* CSS Code... */
}

传给:has()选择器的是一个works字符串，也可以是其他字符串，它是不是一个元素的名称，或选择器名称，浏览引擎并不关心！

父选择器能解决什么问题？

CSS 技能对于一位 UI 开发者是尤其的重要，如何使用 CSS 开发更具健壮性和扩展性的 UI，也是 UI 开发者必备技能之一。

如果你对如何让自己开发的 UI 更健壮，更具扩展性的话题感兴趣的话，可以移步阅读今年年初发表的一篇关于这方面话题的文章：《如何编写防御式的 CSS》！

先不说，如何开发更具扩展性的 UI 和如何编写防御式的 CSS吧。接下来我想和大家聊的是，关系型选择器 :has() 能帮我们解决些什么问题？我想我还是以一些常见的 UI 示例来回答这个问题吧。

先来看案例一。我们平时在还原 UI 的时候，像下图这样的 UI 场景应该很常见：

就如上图中所展示的三组卡片，每组卡片之间输出的数据不同（DOM不同），每组卡片会因为数据字段不同，UI 风格也会略有不同，甚至会有较大的 UI 风格差异。以往我们要实现这样的 UI 效果，需要在不同的元素上添加不一样的类名。就拿第一组来说吧，两张卡片相比，上面的卡片多了描述文本（它可能是一个<p>元素）和一组媒体信息（它可有是一个<ul>），但最终呈现给用户的 UI 风格来说，一张是竖排，另一张是横排。按以往开发模式，可能会在两个不同的卡片上添加不一样的类名：

也就是说，如果希望根据一个元素的存在与否来给一个特定的父级或元素设置不同的样式是不可能的。我们需要像上图那样添加额外的类名，并根据UI的需要来切换它们。就拿上图来说吧，它的 DOM 结构可能像下面这样：

<!-- ①: 带有描述信息和媒体信息的卡片 -->
<div class="card card—vertical">
    <div class="card__media">
        <div class="media__object">
            <img src="https://picsum.photos/400/400?random=2" alt="" class="media__thumb">
        </div>
        <div class="media__content">
            <h3 class="media__title">Kenneth Erickson</h3>
        </div>
        <div class="media__action">
            <svg class="icon--more"></svg>
        </div>
    </div>
    <div class="card__body">
        <p class="card__description">The word "coffee" entered the English language in 1582 via the Ddutch koffie</p>
    </div>
    <div class="card__footer">
        <ul class="card__social">
            <li>
                <svg class="icon--like"></svg> 783 Likes
            </li>
            <li>
                <svg class="icon--comment"></svg> 67 Comments
            </li>
        </ul>
    </div>
</div>

<!-- ②: 带有子标题，没有描述和媒体信息  -->
<div class="card card—horizontal">
    <div class="card__media">
        <div class="media__object">
            <img src="https://picsum.photos/400/400?random=2" alt="" class="media__thumb">
        </div>
        <div class="media__content">
            <h3 class="media__title">Kenneth Erickson</h3>
            <h5 class="media__subtitle">San Diego,CA</h5>
        </div>
        <div class="media__action">
            <svg class="icon--more"></svg>
        </div>
    </div>
</div>

或许你会通过不同的类名来改变 Flexbox 的布局，比如：

/* 默认水平排列，且垂直居中 */
.card {
    display: flex;
    align-items: center;
}

/* 在卡片 ① 上使用下面代码，将水平排列换成垂直排列 */
.card—vertical {
    flex-direction: column;
    align-items: flex-start;
}

问题是，如果 CSS 自身就具备条件判断，那就不需要像上面那样额外的添加类名。那么，关系型伪类 :has() 在这样的场景之下就有用武之地了。

正如前面所介绍，我们可以使用 :has() 来做一定的条件判断，比如说，如果 .card 元素中包含了 p元素或包含一个ul 元素，我们就改变 Flexbox 的布局方式：

.card {
    display: flex;
    align-items: center;
}

.card:has(p, ul) {
    flex-direction: column;
    align-items: flex-start;
}

当然，你也可以使用相关的类选择器：

.card:has(.card__description, .card__social) {
    flex-direction: column;
    align-items: flex-start;
}

这个示例中，卡片 ② 中是没有任何元素命名类名为 .card__description 或 .card__social。

示例使用 :has()的选择器的代码：

.card:has(p, ul) {
    flex-direction: column;
    align-items: flex-start;
}

.card:has(p, ul) .media__object {
    width: 32px;
}

.card__media:not(:has(.media__subtitle)) {
    font-size: 12px;
}

.card__media:not(:has(.media__subtitle)) .icon--more {
    font-size: 24px;
}

@supports not selector(:has(works)) {
    .card {
        flex-direction: column;
        align-items: flex-start;
    }
}

具有差异化 UI 效果如下：

再来看一个有关于表单方面的示例。比如：

为了能给用户一个更好的体验，用户在填写表单内容时，通过一个指示器或其他UI表达信息，来告诉用户完成度和正确度。比如上图的效果，只有用户填写完成，并且符合要求，表单按钮（“SIGN IN”)才高亮可点。以往仅用 CSS 是无法实现这样的UI效果（交互效果），需要借助 JavaScript 来处理。不过有了关系型选择器:has()之后，我们可以根据表单验证相在的伪类选择器，比如 :valid 、 :invalid 和 :checked 等实现上图的效果。

我想通过这两个简单示例告诉大家的是：

关系型伪类选择器:has()可以不再需要因为内容、状态、有效性等添加额外的类名或借助JavaScript脚本来实现具有差异性的 UI 表达。

换句话说，关系型伪类选择器:has()可以有条件的让UI具有差异化表达能力。可能根据动态的内容，状态的切换等调整UI效果，让你的 UI 更具扩展性和灵活性。

父选择器案例

最后我们来看一看能使用关系型伪类选择器 :has() 的具体案例。

Ahmad ShadeedAhmad (@shadeed9)在他新发的文章《CSS Parent Selector》提供了多个使用:has()的案例！

我们可以在 @shadeed9 的基础上可以细分一下 :has() 的使用场景，大致可以分为：

• 基于内容的变化
• 基于状态的变化
• 基于验证的变化

基于内容的变化

前面向大家演示:has()的示例，大部分就是基于内容的变化。开发 Web UI的时候，一些 UI 会因为内容不同而有很多种变化。比如下面这些场景，我想大家并不陌生：

上图中的六组都是来自于 Web 中常见的 UI效果。它们有着共同的一个特色：UI效果或布局因内容的不同效果不同。前面也说过了，以往实现这样的效果，通常会在不同的容器上创建多个类名来覆盖有可能的变化，并根据不同的方法和技术栈，手动或依赖JavaScript脚本来应用它们。

有了关系型选择器:has()，开发者就可以直接在CSS中对内容进行检测，样式就会自动应用，比如上图中的第一组，购物列表页会因为有无清单，展示不同的效果。这将减少变化的 CSS 类的数量，减少人为错误造成的错误的可能性，而且选择器将通过条件检测进行自我记录。

购物列表页

同一个页面，因为内容不同展示两种不同的效果。在没有购物列表时（比如，.shopping__lists）时，页面主内容水平垂直居中：

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

在含有 .shopping__lists 的 main 覆盖Flexbox的布局，

main:has(.shopping__lists) {
    align-items: flex-start;
    flex-direction: row;
    min-height: 0;
}

看到的效果如下：

header {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1c3af;
    background-color: #141414;
    padding: 0 24px;
    gap: 14px;
}

header:has(button + h1) {
    justify-content: flex-start;
    background-image: linear-gradient(90deg, #d39f96 0%, #dfaa9b 100%);
    color: #454545;
}

header:has(h1 + button) {
    justify-content: space-between;
    background-color: #e20200;
    color: #fff;
}

header:has(h1 + .header__buttons) {
    justify-content: space-between;
    background-image: linear-gradient(90deg, #fe4529 0%, #ff4e0a 100%);
    color: #fff;
    position: relative;
}

header:has(h1 + .header__buttons) h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    max-width: 5em;
    overflow: hidden;
    text-overflow: ellipsis;
}

article {
    display: grid;
    grid-template-columns: 50% auto;
    grid-template-areas: "figure content";
    align-items: stretch;
}

article:not(:has(p)) .article__content {
    align-self: center;
}

article:has(p) {
    grid-template-columns: 30% auto;
}

article:has(figcaption) figure {
    position: relative;
}

article:has(figcaption) figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    color: #f5f5f5;
    background: rgba(0, 0, 0, 0.6);
    font-size: 0.75em;
    padding: 1em 2em;
    border-radius: 0 0 0 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

article:has(aside, main) {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5em;
}

article:has(aside, main) > * {
    background: #f5f5f5;
    border-radius: 12px;
    box-shadow: 0 0 0.25em rgb(0 0 0 / 25%);
}

article:has(aside, main) figure,
    article:has(aside, main) img {
    border-radius: 12px 12px 0 0;
}

article:has(aside, main) main {
    padding: 1.5em 2em 2em;
}

article:not(:has(figure)) {
    grid-template-columns: auto;
    grid-template-areas: none;
}

.figures {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    grid-auto-flow: row;
}

<!-- HTML -->
<section class="figures">
    <figure>
        <img src="https://picsum.photos/1280/1024?random=1" alt="">
    </figure>
</section>

<section class="figures">
    <figure>
        <img src="https://picsum.photos/1280/1024?random=2" alt="">
    </figure>
    <figure>
        <img src="https://picsum.photos/1280/1024?random=3" alt="">
    </figure>
</section>

/* 创建12列网格，每列宽度是一个 fr 单位，间距是 10px */
.figures {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    grid-auto-flow: row;
}

/* 默认图片宽度跨 4 列 */
.figures figure {
    grid-column-end: span 4;
}

/* 图片宽高比默认是 1:1 */
.figures img {
    aspect-ratio: 1;
}


/* 图片容器中分别包含 3、 6 和 9 张图片时，图片宽度跨四列，和默认状态相同 */
.figures:has(figure:nth-child(3n):last-child) figure {
    grid-column-end: span 4;
}

/* 图片容器中分别包含 3、 6 和 9 张图片时，图片宽高比是 1:1，和默认状态相同 */
.figures:has(figure:nth-child(3n):last-child) img {
    aspect-ratio: 1;
}

/* 图片容器中分别包含 1、 4 和 7 张图片时，图片宽度跨四列，和默认状态相同 */
.figures:has(figure:nth-child(3n + 1):last-child) figure {
    grid-column-end: span 4;
}

/* 图片容器中分别包含 1、 4 和 7 张图片时，图片宽度跨四列，和默认状态相同 */
.figures:has(figure:nth-child(3n + 1):last-child) img {
    aspect-ratio: 1;
}

/* 图片容器中分别包含 1、 4 和 7 张图片时，最后一张图片宽度跨 12 列 */
.figures:has(figure:nth-child(3n + 1):last-child) figure:last-child {
    grid-column-end: span 12;
}

/* 图片容器中分别包含 1、 4 和 7 张图片时，最后一张图片宽高比 16:9 */
.figures:has(figure:nth-child(3n + 1):last-child) figure:last-child img {
    aspect-ratio: 16 / 9;
}


/* 图片容器中分别包含 2、 5 和 8 张图片时，图片宽度跨四列，和默认状态相同 */    
.figures:has(figure:nth-child(3n + 2):last-child) figure {
    grid-column-end: span 4;
}

/* 图片容器中分别包含 2、 5 和 8 张图片时，图片宽高比是 1:1 */   
.figures:has(figure:nth-child(3n + 2):last-child) img {
    aspect-ratio: 1;
}

/* 图片容器中分别包含 2、 5 和 8 张图片时，最后两张图片宽度跨6列 */  
.figures:has(figure:nth-child(3n + 2):last-child) figure:nth-last-child(1),
.figures:has(figure:nth-child(3n + 2):last-child) figure:nth-last-child(2) {
    grid-column-end: span 6;
}

/* 图片容器中分别包含 2、 5 和 8 张图片时，最后两张图片宽高比是 4:3 */  
.figures:has(figure:nth-child(3n + 2):last-child) figure:nth-last-child(1) img,
.figures:has(figure:nth-child(3n + 2):last-child) figure:nth-last-child(2) img {
    aspect-ratio: 4 / 3;
}

.total {
    color: #c5c5c5;
    font-size: 0.75em;
    font-weight: 300;
    transition: color 0.2s ease;
}

.card--filter:has(input[type="checkbox"]:checked) .total {
    color: #9739e8;
    font-weight: bold;
}

.control--other {
    display: none;
}

form:has(option[value="Other"]:checked) .control--other,
form:has(input[type="radio"][id="other"]:checked) .control--other {
    display: block;
}

#nav-container:has(input[type="checkbox"]:checked) .bg {
    visibility: visible;
    opacity: 0.6;
}

#nav-container:has(input[type="checkbox"]:checked) .icon-bar:nth-of-type(1) {
    transform: translate3d(0, 8px, 0) rotate(45deg);
}

#nav-container:has(input[type="checkbox"]:checked) .icon-bar:nth-of-type(2) {
    opacity: 0;
}

#nav-container:has(input[type="checkbox"]:checked) .icon-bar:nth-of-type(3) {
    transform: translate3d(0, -8px, 0) rotate(-45deg);
}

#nav-container:has(input[type="checkbox"]:checked) #nav-content {
    transform: none;
}

.figures:hover figure:not(:hover) {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.15);
    z-index: 1;
    position: relative;
    background: inherit;
    transition: all 0.2s ease;
}

.figures:hover figure:not(:hover)::before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 2;
    inset: 0;
    transition: all 0.2s ease;
}

.figures:has(figure:hover) figure:not(:hover) {

}

.figures:has(figure:hover) figure:not(:hover)::before {

}

/* 当 a 链接被悬停时，改变列表 ul 边框样式 */
ul:has(a:hover) {
    border: 2px solid whitesmoke;
}

/* 当一个 a 链接被悬停时，改变其他 a 链接的样式 */
ul:has(a:hover) a:not(:hover) {
    opacity: 0.5;
}

.menu:has(button:hover) {
    border: 2px solid #d32c2c;
}

.menu-list:has(button:hover) button:not(:hover){
    filter: opacity(0.5) blur(1px);
}

.menu-item:has(button + ul)  > button::after {
    content: "➤";
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-right: 32px;
    height: 100%;
    top: 0;
    position: absolute;
    right: -22px;
}

input:required + .help-text::before {
    content: '*Required';
}

input:optional + .help-text::before {
    content: '*Optional';
}

input:read-only {
    border-color: var(--gray-lighter) !important;
    color: var(--gray);
    cursor: not-allowed;
}

input:valid {
    border-color: var(--color-primary);
    background-image: url("right.svg");
}

input:invalid {
    border-color: var(--color-error);
    background-image: url("error.svg");
}

input:invalid:focus {
    border-color: var(--color-error);
}

input:invalid + .help-text {
    color: var(--color-error);
}

input[type='email']:invalid + .help-text::before {
    content: 'You must enter a valid email.'
}

input:out-of-range + .help-text::before {
    content: 'Out of range';
}

input[type='checkbox'] + label {
    user-select: none;
}

/* 选中”其他“选项时，对应的输入框显式 */
form:has(option[value="other"]:checked) .control--other-job,
form:has(input[type="checkbox"][value="other"]:checked) .control--other-interests {
    display: block;
}

/* 带有 required 属性的input 对应的 lable 前添加 "❋" 提示符及样式设置 */
.control:has(input:required) label::before {
    content: "❋";
    font-size: 1em;
    font-weight: bolder;
    color: #ff0092;
}

/* 未含 required 属性的input 对应的 lable 前添加 "⇟" 提示符及样式设置 */
.control:has(input:optional, select:optional) > label:not(input + label)::before,
.control:has(input:optional, select:optional) > span::before {
    content: "⇟";
    font-size: 1em;
    font-weight: bold;
    color: #93ff00;
}

/* 输入无效值，改变输入框前标签元素文样颜色 */
.control:has(input:invalid) label:not(input + label) {
    color: #ff3e46;
}

/* 输入无效值，改变输入框样式 */
.control:has(input:invalid) input {
    border-color: #ff3e46;
    box-shadow: inset 0 -5px 45px rgb(207 47 127 / 20%),
        0 1px 1px rgb(216 20 111 / 20%);
    border-color: #ff008e;
    color: #ff008e;
}

/* 输入无效值时，提示信息显示*/
.control:has(input:invalid) .error {
    display: block;
}

/* 输入有效值，改变输入框前面标签元素的文本颜色 */
.control:has(input:valid) label:not(input + label) {
    color: #0be498;
}

/* 输入无效值，警告提示信息显示，输入框输入有效值，警告提示信息框隐藏 */
.form:has(input:invalid) .alert__error {
    display: flex;
}