在 iframe 元素上使用 ::before 生成的内容选择器答案

【问题标题】：Use the ::before generated content selector on an iframe element在 iframe 元素上使用 ::before 生成的内容选择器
【发布时间】：2012-10-24 18:52:04
【问题描述】：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#test iframe {
 border: none;
 background: #333;
 width: 500px;
 height: 500px;
 overflow: hidden;
}

#test iframe:before {
 display: block;
 content: " test";
 width: 500px;
 height: 500px;
 background: url('overlay.png') no-repeat;
 position: relative;
 top: 0px;
 left: 0px;
 z-index: 999;
}
</style>
</head>

<body>

 <div id="test">
  <p><iframe></iframe></p>
 </div>

</body>
</html>

我正在尝试将图像放置在 iframe 上，但由于某种原因，::before 选择器与 iframe 不兼容 — 尝试将 iframe 替换为任何其他元素，它可以工作。我需要 iframe 成为 p 元素的子元素。

【问题讨论】：

iframe的内容是一个单独的网页；我认为您不能从父级应用 CSS。如果可以，您可以在包含的页面中使用body::before {/*...*/}，也许？
但我并没有试图在 iframe 的内容上放置一个覆盖层——我试图覆盖在 iframe 对象本身上，这就是为什么我认为这并不重要
有什么理由必须使用 iframe:before 而不仅仅是它的父段落？
因为我要处理“测试”div 中的多个段落，而我只想在 iframe 上应用叠加层——我使用 before 选择器的原因是因为我在“永久链接页面”上加载其他样式，这将覆盖以前的样式

标签： css iframe

【解决方案1】：

对此我不确定，但我认为除非用户的浏览器不支持 iFrame，否则它不会显示。

如果你看一下this answer，它会建议将 :before 和 :after 伪元素放在父元素内，在本例中是 iFrame。

现在我们转到the docs 并可以从这段代码中推断出 iFrame 子项的行为：

<iframe src="page.html" width="300" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

也就是说，它们仅在 iFrame 的src 未显示时显示。同样，这只是推论，但似乎是一个合理的解释。

【讨论】：