CSS 父选择器 :has()

精通CSS-点击快速学习

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

在 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) {

标签： css 前端 html

本文转载自: https://blog.csdn.net/shangyanaf/article/details/128280465
版权归原作者 搞前端的半夏 所有，如有侵权，请联系我们删除。