CSS选择器 - 具有给定子元素的元素[重复]

Question

这个问题在这里已有答案：

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

可能？

Answer 1

如果元素包含特定的子元素，是否可以选择它？

不幸的是还没有。

CSS2和CSS3选择器规范不允许任何类型的父选择。

从这一点开始，这是关于这篇文章准确性的免责声明。 CSS中的父选择器已经讨论了很多年。由于没有找到共识，变化不断发生。我会尝试将此答案保持最新，但请注意，由于规格的变化，可能会出现不准确之处。

较老的"Selectors Level 4 Working Draft"描述了一个能够指定"subject" of a selector的功能。此功能已被删除，无法用于CSS实现。

主题将成为选择器链中应用了样式的元素。

_{Example 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;
}

最近的"Selectors Level 4 Editor’s Draft"包括“The Relational Pseudo-class：:has()”

:has()允许作者根据其内容选择元素。我的理解是选择提供与jQuery's custom :has()伪选择器*的兼容性。

无论如何，继续上面的例子，选择包含p的span元素可以使用：

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

*这让我想知道jQuery是否已经实现了选择主题，无论主题是否仍然在规范中。

Answer 2

更新2019年

qazxsw poi是在CSS Selectors 4规范中提出的，并且一旦实现就会解决这个用例。

要使用它，我们将编写如下内容：

:has() pseudo-selector

在如下结构中：

.foo > .bar:has(> .baz) { /* style here */ }

这个CSS将针对<div class="foo"> <div class="bar"> <div class="baz">Baz!</div> </div> </div> div - 因为它有一个父.bar，并且从它在DOM中的位置，.foo解析为一个有效的元素目标。

原始答案（左为历史目的） - 此部分不再准确

为了完整起见，我想指出在> .baz规范（目前在提案中），这将成为可能。具体来说，我们将获得Selectors 4，它将以下列格式使用：

Subject Selectors

在!div > span { /* style here */选择器之前的!表明它是要被设计的元素，而不是div。不幸的是，没有现代浏览器（截至发布时）已将其作为CSS支持的一部分实现。但是，如果你想进一步探索探索之路，那么可以通过span获得支持。

Answer 3

我同意一般不可能。

CSS3可以做的唯一事情（在我的情况下有帮助）是选择没有子元素的元素：

a JavaScript library called Sel

或者有孩子（包括文字）：

table td:empty
{
   background-color: white;
}