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

Question

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

可能？

Answer 1

该:has()伪选择是propsed在CSS选择4规格的，一旦实施将解决这个用例。要使用它，我们将编写如下内容：.foo > .bar:has(> .baz) { /* style here */ }在像这样的结构中：<div class="foo">&nbsp; <div class="bar">&nbsp; &nbsp; <div class="baz">Baz!</div>&nbsp; </div></div>这个CSS将针对.barDIV -因为这两者有一个父 .foo和其在DOM位置，> .baz解析为一个有效的元素目标。原始答案（留作历史用途）- 此部分不再准确为了完整起见，我想指出的是，在Selectors 4规范（当前正在提议中）中，这将成为可能。具体来说，我们将获得主题选择器，它将以以下格式使用：!div > span { /* style here */在!之前的div选择器指示它是要被风格，而不是元件span。不幸的是，目前尚无现代浏览器（截至本文发布时）实现此功能作为其CSS支持的一部分。但是，如果您想进一步探索的话，可以通过名为Sel的JavaScript库获得支持。

Answer 2

我同意这是不可能的。CSS3唯一可以做的事情（对我而言是有帮助的）是选择没有子元素的元素：table td:empty{&nbsp; &nbsp;background-color: white;}或有任何孩子（包括文字）：table td:not(:empty){&nbsp; &nbsp;background-color: white;}