CSSselect器 – 给定子元素

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

可能？

如果元素包含特定的子元素，可以select元素吗？

不幸的是还没有。

CSS2和CSS3select器规范不允许任何父类select。

从这一点起，这是对这篇文章的准确性的一个免责声明。 CSS中的父母select器已经讨论了很多年了。由于没有find共识，变化正在发生。我会尽力保持这个答案是最新的，但请注意， 由于规格的变化，可能会有不准确的地方 。

一个较老的“select器4级工作草案”描述了一个特性，即能够指定select器的“主体” 。 此function已被删除，将不可用于CSS实现 。

这个主题将成为select器链中的元素，将会对其应用样式。

_HTML示例

 <p><span>lorem</span> ipsum dolor sit amet</p> <p>consecteture edipsing elit</p>

这个select器可以设置span元素的样式

 p span { color: red; }

这个select器将风格的p元素

 !p span { color: red; }

最近的“select器4级编辑草案”包括“关系伪类:has() ”

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

在任何情况下，继续从上面的例子，select包含span的p元素可以使用：

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

_{*这让我怀疑jQuery是否实现了select主题，主题是否保留在规范中。}

为了完整起见，我想指出，在select器4规范（目前在build议），这将成为可能。具体而言，我们将获得主题select器，将以以下格式使用：

 !div > span { /* style here */

那! 在divselect器之前指示它是要被称呼的元素，而不是span 。不幸的是，现在的浏览器（截至本文发布时）都没有将其作为CSS支持的一部分。然而，如果你想进一步探索探索的path，通过一个名为Sel的JavaScript库支持。

我同意这是不可能的。

CSS3可以做的唯一的事情（帮助我）是select没有孩子的元素：

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

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

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