在CSS Selectors 4规范中，CSS 引入了一个名为 的新选择器:has()，它最终让我们可以选择父级。这意味着我们可以选择具有特定元素的父元素。目前Safari和Chrome105已经支持。

父选择器如何在 CSS 中工作

在 CSS 中，如果我们想要选择某些东西，我们会使用后代选择器。例如，选择在div标签中的p标签中，如下所示：

div p {
    color: red;
}

在这之前，如果我们想要选择包含p标签的div标签是没有办法的，我们就需要使用javaScript来完成我们的操作。

使用:has选择器，我们现在可以选择包含p子元素的div元素，或者选择器的任何正常组合。代码如下所示：

div:has(p) {
    color: red;
}

这段可以会将所有含有p标签的div标签的颜色变成红色。

将父选择与其他选择器相结合

就像任何其他 CSS 选择器一样，我们可以在特定情况下组合它。例如，如果只想选择div具有直接span子代的标签：

div:has(> span) {
    color: red;
}

不过它不仅限于父母选择。例如，下面我们可以选择一个包含兄弟div的span元素：

span:has(+ div) {
    color: red;
}

甚至，使用:not()选择器选择没有子元素的元素。例如，以下将选择任何没有p元素的div：

div:not(:has(p)) {
    color: red;
}

选择仅包含 CSS 文本的元素

CSS 中一个非常常见的问题是:empty标签不选择包含任何文本的元素 - 所以如果一个元素包含一个空格，那么:empty就不会生效。:has选择器使我们能够选择仅包含文本节点的元素，而没有其他子元素。

虽然这对于带有空格的简单元素来说不是完美的解决方案——它确实让我们能够选择只有文本节点的 DOM 元素，这在以前是不可能的. 我们可以通过以下代码实现这一点：

div:not(:has(*)) {
    background: green;
}

兼容

如果想要在现有的项目中使用has选择器，可以考虑使用下面的polyfill
》https://www.npmjs.com/package/css-has-pseudo

结论

随着Chrome 105 中添加了对:has()选择器支持，父选择正在迅速成为现实，我们很快就能在项目中使用它。到目前为止，有了 Safari 支持，很容易测试并了解它在未来的工作方式。这还有一个额外的好处，就是让我们减少了父选择的 Javascript 解决方案。