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

Question

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

Answer 1

该:has()伪选择是propsed在CSS选择4规格的，一旦实施将解决这个用例。

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

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

在像这样的结构中：

<div class="foo">

  <div class="bar">

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

  </div>

</div>

这个CSS将针对.barDIV -因为这两者有一个父 .foo和其在DOM位置，> .baz解析为一个有效的元素目标。

原始答案（留作历史用途）- 此部分不再准确

为了完整起见，我想指出的是，在Selectors 4规范（当前正在提议中）中，这将成为可能。具体来说，我们将获得主题选择器，它将以以下格式使用：

!div > span { /* style here */

在!之前的div选择器指示它是要被风格，而不是元件span。不幸的是，目前尚无现代浏览器（截至本文发布时）实现此功能作为其CSS支持的一部分。但是，如果您想进一步探索的话，可以通过名为Sel的JavaScript库获得支持。

Answer 2

我同意这是不可能的。

CSS3唯一可以做的事情（对我而言是有帮助的）是选择没有子元素的元素：

table td:empty

{

   background-color: white;

}

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

table td:not(:empty)

{

   background-color: white;

}