一尘不染

CSS选择器-具有给定子元素的元素

css

我正在寻找一个选择器,如果它们具有特定的子元素,它将选择所有元素。例如,选择所有<div>带孩子的人<span>

可能?


阅读 840

收藏
2020-05-16

共1个答案

一尘不染

如果元素包含特定的子元素,是否可以选择?

不幸的是还没有。

在CSS2和CSS3选择器的规格不允许任何形式的亲本选配。


关于规格变更的注意事项

从现在开始,这是关于此帖子准确性的免责声明。CSS中的父选择器已经讨论了很多年。由于尚未达成共识,因此变化不断发生。我将尝试使此答案保持最新状态,但是请注意,
由于规格的更改,可能存在一些不准确之处


较早的“选择器4级工作草案”描述了一项功能,该功能可以指定选择器的“主题”。

主题将是选择器链中要应用样式的元素。

HTML范例

<p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>

该选择器将为span元素设置样式

p span {
    color: red;
}

该选择器将为p元素设置样式

!p span {
    color: red;
}

最新的“选择器第4级编辑器草案”包括“关系伪类::has()

:has()允许作者根据其内容选择元素。我的理解是选择它是为了与jQuery的自定义:has()伪选择器* 兼容。

无论如何,继续上面的示例,选择p包含一个的元素span可以使用:

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

*这使我想知道jQuery是否实现了选择器主题,而主题是否仍保留在规范中。

2020-05-16