CSS 父选择器 :has()_css :has

精通CSS-点击快速学习

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

父选择器如何在 CSS 中工作

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

div p {
    color: red;
}
1
2
3

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

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

div:has(p) {
    color: red;
}
1
2
3

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

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

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

div:has(> span) {
    
1