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

Question

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

可能？

Answer 1

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

不幸的是还没有.

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

关于规范变更的注意事项

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

较旧的"选择器4级工作草案"描述了一种能够指定选择器的"主题"的功能.此功能已被删除,无法用于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"包括"The Relational Pseudo-class::has()"

:has()允许作者根据其内容选择元素.我的理解是选择提供与jQuery的自定义:has()伪选择器*的兼容性.

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

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

_{*这让我想知道jQuery是否已经实现了选择主题,无论主题是否仍然在规范中.}

Answer 2

更新2019年

该: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 3

我同意一般不可能.

CSS3可以做的唯一事情(在我的情况下有帮助)是选择没有子元素的元素:

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

或者有孩子(包括文字):

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