如何将CSS应用于iframe内容？

Question

我无法让CSS生成的内容在iframe元素中正常工作：

iframe::after {content: 'example';}
iframe::before {content: 'example';}

有没有真正有效的解决方案？谢谢提前。

- boruchsiper

---

你需要说出为什么其他的线程（比如https://dev59.com/inVC5IYBdhLWcg3wrDJd）对你来说不够好。否则人们最终会发表相同的答案。例如，你是否尝试了其他建议？ - Alexander Bird

Answer 1

你可以使用 jQuery 的 .content() 函数来访问它。

$('yourIframe').contents().find('#yourItemYouWantToChange').css({
    opacity: 0,
    color: 'purple'
});

示例

这里有一个示例，展示了我如何将CSS应用于通常位于屏幕左上方的jQuery标志。请注意，它必须是相同的域/端口等，因此我的示例在iframe中使用了jsfiddle。
http://jsfiddle.net/pPqGe/

- Robert

---

仅当iFrame来自相同的父域时才有效。 - Jeremy Becker

在标题中添加样式是另一种选择。stackoverflow.com/a/13959836/759452 - Adriano

Answer 2

这个 iframe 是动态创建的，还是大多数情况下静态的（例如用于 lightbox 效果的 iframe）？

如果它是静态的，您可以在 iframe 标记内部使用样式标签，或者更好的方法是通过在 iframe 标记中链接到外部样式表来包含它。

如果它是动态的，最好使用 jQuery JavaScript 库，因为它非常擅长处理 CSS。

- Moses