CSS Parent Selector

问题所在

无法仅因为父元素或某个元素存在就以某种方式对其进行样式设置。必须根据所需的变化创建和切换 CSS 类。

看这个例子。

我们的卡片组件有两种变体：一种使用图片，另一种不使用图片。我们可以使用 CSS 来实现类似的功能。

由于我们不需要 flex 容器，如上所示，我们专门创建了一个没有图片的卡片变体类。如果我们能用 CSS 条件性地实现它，而不是使用变体类，那会怎么样？

这就是 CSS 发挥作用的地方。它可以帮助我们确定 .card 元素是否包含 .card__image。

例如，我们可以使用以下方法检查卡片是否有图片：

隆重推出 CSS:has 选择器

根据 CSS 规范，:has 选择器可以确定父元素是否包含一个元素或满足某个条件，例如输入是否处于聚焦状态。

让我们回到之前的示例。

我们确定 .card 父元素是否包含 .card__image 子元素。看看这张图：

简单来说，上面的 CSS 相当于：

卡片上是否存在 card__image 元素？

这难道不神奇吗？在 CSS 中，我们开始看到一些逻辑。这是创建 CSS 的绝佳时机！

:has 选择器不仅仅关心父元素

除了确定父元素是否包含子元素，我们还可以确定一个元素后面是否跟着一个

元素。考虑以下：

这确定了一个

元素是否紧跟在

元素之后。

或者，例如，我们可以将其与表单元素结合使用，以查看是否存在聚焦的输入。

/* If the form has a focused input, apply the following */ form:has(input:focused) { background-color: lightgrey; }

浏览器支持

在撰写本文时，CSS:has 与 Chrome Canary 和 Safari 15.4 兼容。请注意是否可以使用此支持。

它可以作为一种改进应用吗？

是的，这是可能的。使用 CSS @supports 规则，我们可以按如下方式验证。

@supports selector(:has(*)) { /* do something */ }

现在，理论讲得够多了——让我们来看一些应用场景！

CSS:has 部分标题的用法

通常，当处理部分标题时，我有两种变体：一种只有标题，另一种则包含标题和锚链接。

如果存在或不存在链接，我想以不同的方式设计它。

<section> <div class="section-header"> <h2>Latest articles</h2> <a href="/articles/">See all</a> </div> </section>

请注意我使用的以下内容：仅当它包含 (> a) 时，才选择直接子链接。

.section-header { display: flex; justify-content: space-between; } /* If there is a link, add the following */ .section-header:has(> a) { align-items: center; border-bottom: 1px solid; padding-bottom: 0.5rem; }

示例 1：卡片组件

让我们回到最初的卡片示例。有两个版本：一个带图片，另一个不带图片。

.card:has(.card__image) { display: flex; align-items: center; }

我们还可以应用一些特殊的样式，看看 .card 是否包含图片。对我们来说，这是边界的边缘。

.card:not(:has(.card__image)) { border-top: 3px solid #7c93e9; }

在没有 CSS :has 来管理已采取的操作的情况下，需要两个 CSS 类。

.card--default { display: flex; align-items: center; } .card--plain { border-top: 3px solid #7c93e9; }

查看演示卡片组件的示例 2。

此示例卡片展示了两种不同的卡片操作选项：一种只有一个项目（链接），另一种有多个操作（保存、共享等）。

当卡片操作包含两个不同的活动包装器时，我们希望启用 display: flex。如下所示，下面的标记仅用于演示，请忽略它。

<div class="card"> <div class="card__thumb><img src="cool.jpg"/></div> <div class="card__content"> <div class="card__actions"> <div class="start"> <a href="#">Like</a> <a href="#">Save</a> </div> <div class="end"> <a href="#">More</a> </div> </div> </div> </div> .card__actions:has(.start, .end) { display: flex; justify-content: space-between; }

---

下一主题CSS Float Right

← 上一篇 下一篇 →