精通CSS-点击快速学习

父选择器如何在 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) {