CSS：仅在包含特定元素时才选择元素[重复]

Posted 2023-03-06

【中文标题】CSS：仅在包含特定元素时才选择元素[重复]

【英文标题】：CSS: selecting an element only if it contains a specific element [duplicate]

【发布时间】：2012-12-13 23:29:39

【问题描述】：

我正在创建一个 print 样式表，并且希望仅在该标签包含 iframe（恰好是嵌入的 YouTube 视频）时隐藏所有 figure 标签。如果figure 标签包含其他任何内容（即img），我希望标签及其内容仍显示在打印页面上。

我知道我可以简单地将“视频”的class 应用到我的figure 标签中，但我想看看是否有办法通过 CSS /em> 无需在我的网站中添加类。此外，即使我知道它们存在，我也不是在寻找 jQuery 解决方案。

谢谢！

【问题讨论】：

其实 CSS4 给了你一个父选择器。

我假设仅仅隐藏 iframe 是不够的？

Praveen >> 我认为浏览器的支持还不够高，不足以成为目前可行的解决方案。

Shmiddty>> 我曾尝试隐藏 iframe，但很快意识到我还需要隐藏关联的 figcaption。我可以使用 iframe ~ figcaption 来实现这一点，但随后留下了一个图形标签，由于属性边距和填充，在我的打印纸上创建了一个空白区域。唉，这就是为什么我希望看到整个图形被隐藏，而不仅仅是它的单个内容。 （我已经编辑了我原来的帖子，希望能更清楚。）

@Praveen Kumar：不，它没有。

【参考方案1】：

您正在寻找父选择器

CSS3 没有，但 CSS4 有一个类似于使用$ 进行选择。

这里有一些类似的问题，结果相似：

Is there a CSS parent selector? CSS Parent/Ancestor Selector Complex CSS selector for parent of active child

【讨论】：

仅供参考，$ 语法已被删除。没有人知道最终的语法会是什么。

好的。让我们看看... CSS 4 有什么东西... :D 等待... :D