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

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

可惜还没有。

这个 CSS2 和 CSS3 选择器规范不允许任何父选择。

关于规范变更的说明

从这一点开始,这是一个关于这篇文章准确性的免责声明。CSS中的父选择器已经讨论了很多年。由于没有达成共识,变化不断发生。我会尽量保持这个答案是最新的,但是要知道 由于规格的变化,可能会有不准确的地方 .

年长的 "Selectors Level 4 Working Draft" 描述了一个功能,它能够指定 "subject" of a selector . 此功能已被删除,无法用于CSS实现 .

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

<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() "

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

在任何情况下,继续上面的示例,以选择 第页 包含 跨度 可以使用:

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

_{*这使我怀疑jQuery是否实现了选择器主题,主题是否会保留在规范中。}

2019年更新

这个 :has() pseudo-selector 在CSS Selectors 4规范中提出,并将在实现后解决此用例。

要使用它,我们将编写如下内容:

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

在这样的结构中:

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

此CSS将针对 .bar 因为它 二者都 有一个 起源 .foo 从它在国内的地位来看, > .baz 解析为有效的元素目标。

原始答案 (留作历史用途)- 这部分不再准确

为了完整起见,我想指出 Selectors 4 规范(目前在建议书中),这将成为可能。具体来说,我们将获得 Subject Selectors ,将以以下格式使用:

!div > span { /* style here */

这个 ! 在 div 选择器指示它是要设置样式的元素,而不是 span . 不幸的是,没有现代浏览器(截至本文发表时)将此作为其CSS支持的一部分来实现。但是,通过 a JavaScript library called Sel ,如果你想继续探索的话。

我同意总的来说这是不可能的。

CSS3唯一能做的事情(在我的例子中有帮助)是选择没有子元素的元素:

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

或有子女(包括文字):

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