Question

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

可能的？

Answer 1

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

不幸的是还没有。

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

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

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

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

_示例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"包含“关系伪类：:has()”

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

无论如何，继续上面的示例，选择包含p的{{1}}元素可以使用：

span

_{*这让我想知道jQuery是否已经实现了选择主题，无论主题是否会留在规范中。}

Answer 2

更新2019

{4}}在CSS Selectors 4规范中得到支持，并将在实施后解决此用例。

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

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

在如下结构中：

<div class="foo">
  <div class="bar">
    <div class="baz">Baz!</div>
  </div>
</div>

此CSS将定位.bar div - 因为 .foo并且从其在DOM中的位置{{} 1}}解析为有效的元素目标。

原始答案（左侧是出于历史目的） - 此部分不再准确

为了完整起见，我想指出在:has() pseudo-selector规范（目前在提案中），这将成为可能。具体来说，我们将获得Selectors 4，它将按以下格式使用：

> .baz

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

Answer 3

我同意一般情况下不可能。

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

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

或有任何孩子（包括文字）：

table td:not(:empty)
{
   background-color: white;
}