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

Posted 2023-03-06

【中文标题】CSS选择器-具有给定子元素的元素[重复]

【英文标题】：CSS selector - element with a given child [duplicate]

【发布时间】：2011-05-12 08:14:36

【问题描述】：

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

可能吗？

【问题讨论】：

鉴于 Jeff 的 recent comments on dupes，我不会投票关闭作为副本，但值得指出的是，discuss the much-desired parent-selectors 上还有很多其他问题。

为什么谷歌总是把我带到结果排名顶部的“重复”答案，而不是他们都提到的那个？搜索：'css select parent with specific child' 产生 SO 结果：1:4220327 2:14509590 3:11547535;给定的现有答案 1014861 不在第一页上。

【参考方案1】：

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

很遗憾还没有。

CSS2 和 CSS3 选择器规范不允许任何类型的父选择。

---

关于规格变更的说明

这是关于从现在开始这篇文章的准确性的免责声明。 CSS 中的父选择器已经讨论了很多年。由于尚未达成共识，因此不断发生变化。我会尽量保持这个答案是最新的，但是请注意，由于规范的变化，可能会有不准确的地方。

---

较早的"Selectors Level 4 Working Draft" 描述了一项功能，即能够指定"subject" of a selector。 此功能已被删除，将无法用于 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" 包括“关系伪类：:has()”

:has() 将允许作者根据其内容选择元素。我的理解是选择它是为了提供与jQuery's custom :has() pseudo-selector* 的兼容性。

无论如何，继续上面的示例，选择包含span 的p 元素，可以使用：

p:has(span) 
    color: red;

---

_{* 这让我想知道 jQuery 是否已经实现了选择器主题，主题是否会保留在规范中。}

【讨论】：

很好的答案...也可以考虑阅读css-tricks.com/child-and-sibling-selectors

CSS 是一个很棒的工具，出于这些目的应该避免使用 javascript。然而，这是一个很好的例子，为什么开发人员为了达到他们想要的目的而接受其他手段。太糟糕了...

:has 很棒但得到很好的支持caniuse.com/#search=%3Ahas

@PaulLedger 你的意思是很好但没有得到很好的支持？我会说在 CSS 中根本不支持。

【参考方案2】：

2021 年 10 月更新 - 未来功能。尚不支持任何浏览器

:has() pseudo-selector 是在 CSS 选择器 4 规范中提出的，一旦实施就会解决这个用例。

要使用它，我们将编写如下内容：

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

在这样的结构中：

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

此 CSS 将针对 .bar div - 因为它两者都有一个 父 .foo 并且从它在 DOM 中的位置来看，> .baz 解析为有效的元素目标。

---

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

为了完整起见，我想指出，在Selectors 4 规范（目前正在提议中）中，这将成为可能。具体来说，我们将获得Subject Selectors，其使用格式如下：

!div > span  /* style here */

div 选择器之前的! 表示它是要设置样式的元素，而不是span。不幸的是，没有现代浏览器（截至本文发布时）将其作为其 CSS 支持的一部分实现。但是，如果您想进一步探索，请通过a JavaScript library called Sel 提供支持。

【讨论】：

截至 2021 年 4 月，尚不支持任何浏览器 caniuse.com/css-has

【参考方案3】：

我同意一般情况下这是不可能的。

CSS3 唯一能做的（在我的例子中很有帮助）是选择没有子元素的元素：

table td:empty

   background-color: white;

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

table td:not(:empty)

   background-color: white;

【讨论】：

只有 :not(:empty) 对我有用。仅 :empty 不工作