CSS Style Parent based on Child

如何使用 :has() 作为父选择器

让我们从基础开始了解 :has() 的用法。假设我们有一个 <figure> 元素，它的内容是基于 figure 中的内容的。有时，我们的 figure 只包含一个图像。

现在，我们将对 figure 应用一些样式，这些样式只在 figure 内部存在 figcaption 时才应用。

让我们通过一个例子来理解这一点

HTML 代码

输出

此外，我们还借助选择器功能查询来隐藏关于浏览器支持的提醒，只要当前浏览器支持 :has()。

使用 :has() 和 CSS Grid 的示例

我们来看第二个示例，我们将使用 :has() 作为父选择器来轻松解决一个非常实用的需求。

:has() 伪类使这变得简单

HTML 代码

输出

上面两个示例使用了元素选择器。然而，在 :has() 的帮助下，我们可以组合所有选择器，包括类选择器、属性选择器和 ID 选择器。

将 :has() 与子组合器一起使用

在使用 :has() 之前，让我们了解一下后代选择器和子组合器。

后代选择器从一开始就存在于 CSS 中。当我们两个简单选择器之间留一个空格时，它有一个花哨的名字。像这样

借助此选择器，我们可以将 <img> 与 <a> 组合起来，无论 a 和 img 在 HTML DOM 树中相距多远。

让我们通过一个例子来理解这一点

HTML 代码

输出

在上面的示例中，还有两种额外的组合器类型。这些组合器是兄弟。正是通过这些，() 不仅仅是一个父选择器。

将 :has() 与兄弟组合器一起使用

我们来回顾一下具有兄弟关系的两个选择器。有相邻兄弟组合器 (+) 和通用兄弟组合器 (~)。

现在，我们将实现相邻兄弟组合器 (+)，它只选择紧跟在 h2 元素之后的段落。

h2 + p

借助通用兄弟组合器 (~)，我们可以选择 h2 元素之后的所有段落。这些组合器必须是彼此的兄弟。但中间可以有多个其他 HTML 元素。

h2 ~ p

现在，借助 h2 + p 和 h2 ~ p，我们可以选择段落元素而不是 h2 标题。与另一个元素类似，我们可以选择选择器所定位的最后一个列出的元素。但是，如果我们想定位 h2 怎么办？我们可以将兄弟组合器与 :has() 一起使用。

无需 JS 即可设置表单状态的样式

:has() 中包含许多伪类。伪类可以做所有事情。此外，借助伪类，我们只能根据特殊状态或设置其子元素之一的样式来设置元素的样式。此外，借助伪类，它可用于在没有 JavaScript 的情况下捕获状态并根据该状态设置 DOM 中的任何元素的样式。

表单输入字段提供了捕获这种状态的强大方法。表单特定的伪类包括：:autofill、:enabled、:disabled、:read-only、:read-write、:placeholder-shown、:default、:checked、:indeterminate、:valid、:invalid、:in-range、:out-of-range、:required 和 :optional。

我们来解决其中一个用例。让我们创建一个基本表单。

让我们为表单应用一些背景样式。

现在，我们将改用 form:focus-within，但它的行为类似于 form:has(:focus)。当一个字段设置为获得焦点时，focus 伪类总是应用 CSS。focus-visible 伪类提供了一种可靠的方法，仅当浏览器会原生绘制焦点指示器时才为其设置样式，它使用浏览器用来确定是否应用焦点环的相同复杂启发式算法。

现在，我想通过改变其标签文本颜色和输入边框颜色来设置其他未获得焦点的字段的样式。在 :has() 之前，这需要 JavaScript。现在，我们可以使用此 CSS。

通过单击其中一个文本字段，您可以在以下演示中看到此代码的实际效果。正如我前面所述，表单的背景会改变，未获得焦点的字段的标签和输入边框颜色也会改变。

现在，让我们举一个例子以便更好地理解。

HTML 代码

输出

在上面的代码中，当发生错误时，让我们向用户提供警告。为此，我们来编写代码片段。

现在，让我们将警告文本颜色设置为红色。

无需 JS 的深色模式切换

让我们向用户提供更改切换到浅色和深色主题的功能。其代码片段如下。

现在，让我们提供选择菜单选项，以便用户可以选择多种颜色。

现在，让我们编写完整的代码

HTML 代码

输出