CSS Select 器具有给定子元素的元素

发布于11月19日

我正在寻找一个 Select 器，它将 Select 所有元素，如果他们有一个特定子元素.例如， Select 所有<div>个子对象为<span>的对象.

可能吗？

推荐答案

如果元素包含特定的子元素，是否可以 Select 该元素？

不幸的是还没有.

CSS2和CSS3 Select 器规格不允许任何类型的父 Select .

这是对这篇帖子从现在开始的准确性的免责声明.CSS中的父 Select 器已经讨论了很多年.由于没有找到共识，变化不断发生.我会努力使这个答案保持最新，但是请注意there may be inaccuracies due to changes in the specifications.

一个较老的"Selectors Level 4 Working Draft"描述了一个功能，即指定"subject" of a selector的能力.This feature has been dropped and will not be available for CSS implementations.

主题将成为 Select 器链中应用样式的元素.

_{Example 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;
}

最近的"Selectors Level 4 Editor’s Draft"包括"关系伪类::has()"

:has()将允许作者根据元素的内容 Select 元素.我的理解是， Select 它是为了提供与jQuery's custom :has()伪 Select 器*的兼容性.

在任何情况下，继续上面的示例，要 Select 包含span的p元素，可以使用:

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

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

实用课程推荐