将 css 应用于 html 但不是 iframe html
Posted
技术标签:
【中文标题】将 css 应用于 html 但不是 iframe html【英文标题】：apply css to html but not iframe html 【发布时间】：2013-05-01 22:32:30 【问题描述】：我正在为插件“时尚”制作用户样式表。
它在整个页面上应用了一个半透明的黑框以供夜间浏览。
我正在使用：
html:before
content:url()!important;
position:fixed!important;
width:100%!important;
height:100%!important;
top:0!important;
left:0!important;
background:rgba(2,3,3,.35)!important;
z-index:99999999999999999!important;
pointer-events:none!important;
创建固定的覆盖 div。
这很好用，但是，如果站点中有任何 iframe，它会将此代码应用到 iframe 的 HTML 中，您可以在此处看到：
因为这些社交网络小部件依赖于 IFRAME，它将代码重复到这些页面中，从而创建了我制作的半透明暗盒的双重叠加。
想要的外观应该是：
我已经尝试过 hack-ish 的东西，比如对 iframe 应用更高的 z-index 并将 iframe 中任何内容的背景颜色和背景指定为“白色”和“不透明”，以便它“浮动'在父 html 页面的顶部，但这并不完美。我也尝试过类似的东西：
html:not(iframe):before
但这也行不通。我想知道是否有办法以不依赖 'html:before' 来创建相同效果的方式来做我想做的事情，或者是否有办法做到这一点但没有在页面上的 iframe 的 html 中重复。
我已经竭尽全力试图让它发挥作用，所以任何帮助都将不胜感激。谢谢。
【问题讨论】：
第一次听说夜间浏览这个词iframe html:before display: none; ?
html:not(iframe) 总是很简单地匹配，因为 html 不是 iframe。
不幸的是，这些都不起作用。这就是发生的事情，我认为：iframe 的 html 不知道它是 iframe，就“时尚”（附加组件）而言..因为它首先将更改应用于任何“html”，对html 在 iframe 中的事实。这就是为什么我认为我需要尝试“html:before”以外的其他方法来使内容出现在“父”html页面上。
考虑到您使用的是 Stylish，此 CSS 是否在用户样式表中？
【参考方案1】：
不幸的是，无法使用 CSS 仅定位 iframe 源中的 iframe 的内容，即包含 iframe 元素的页面。
由于您使用的是 Stylish，我假设您的 CSS 位于 Firefox 用户样式表中。如果是这样，您可能需要查看这些 iframes 的源 URL，创建针对这些 URL 在其域中的 @-moz-document 规则，并相应地删除 html:before 伪元素。
类似这样的东西，应该低于你已经拥有的东西：
@-moz-document domain(/* Facebook Like */),
domain(/* Tweet Button */),
domain(/* Google +1 */)
html:before
content: none !important;
content: none 声明禁用伪元素，阻止它被渲染。
必须以这种方式排除特定域意味着这种方法非常有限，而且根本不是很通用，但这是我能想到的最好的方法。
【讨论】：
我曾尝试过针对 twitter、fb 等进行特定领域的定位，但由于某种原因，它无法正常工作。但是，您的代码可以完美运行。我认为这是必须要做的。对此，我真的非常感激。 :) @user1975224：没问题，很高兴我能帮上忙！老实说，当我应该（并且即将）上床睡觉时，我很快就做出了反应——现在已经快到早上了！【参考方案2】：您可能想尝试不同的路线：
html
box-shadow: inset 0 0 0 2000px rgba(2, 3, 3, .35) !important;
Demo
这样当用户的浏览器不支持pointer-events时网页仍然可以使用。
您可能还想查看这个问题：CSS - max z-index value
要将这些样式仅应用于父文档的 <html> 元素，而不应用于 iframe，只需使用 JS 将 box-shadow 应用于 document.documentElement：
document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";
【讨论】：
这很好。感谢您的建议.. 现在找到一种方法让它不适用于 iframe：[.【参考方案3】：编辑：
我不知道插件的事情，但你可以给你的 HTML 标记一个 ID 并以这种方式定位它，尽管如果你希望它适用于所有页面，那么这是一个问题
或者也许使用 html:first-child ？我真的不知道会发生什么，不过你可以试一试
【讨论】：
不，当然不会 -html 是根元素，因此在任何一种情况下都不会匹配。
他的css如何影响iframe中的文件，我不明白
我猜这与他使用的插件有关，它是 Firefox 的用户样式表管理器。
哦，那就另当别论了
html:first-child 将不匹配，因为html 是根元素，而根元素没有父元素，因此它不是子元素。【参考方案4】：
CSS 不允许您在 iframe 中设置 HTML 样式。由于您使用的是附加组件，因此这是 CSS 的非标准实现。 iframe 不会继承样式，因为 iframe 基本上是一个新的浏览器窗口。该插件将样式添加到浏览器窗口中的每个 HTML 页面。浏览器无法知道页面是否在 iframe 中（至少不能通过 CSS 访问）。
【讨论】：
正确，尽管所讨论的插件只是 Firefox 用户样式表的 UI 前端，它是 cascade 不可或缺的一部分，并且绝对是标准的一部分。 对，但 Firefox 正在将样式应用于每个 html 元素。 CSS 不会从一个 html 元素级联到 iframe 中的一个 html 元素。它将用户样式表分别应用于两者。以上是关于将 css 应用于 html 但不是 iframe html的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法将编写在代码镜像中的 css 应用于 iframe 的 html 内容？