将css应用于html，但不应用于iframe html

我正在为“时尚”插件制作一个用户样式表

它在整个页面上应用一个半透明的黑框，以便夜间浏览

我正在使用：

html:before{
内容：url（）！重要；
位置：固定！重要；
宽度：100%！重要；
身高：100%！重要；
顶部：0！重要；
左：0！重要；
背景：rgba（2,3,3,35）！重要；
z索引：999999999999999！重要；
指针事件：无！重要；
}

创建固定的覆盖div

这很好，但是，如果站点中有任何iFrame，它会将此代码应用到iFrame的HTML中，您可以在这里看到：

因为这些社交网络小部件依赖于IFRAME，它将代码重复到这些页面中，创建了我制作的半透明黑盒的双重覆盖

理想的外观是：

我曾经尝试过一些黑客行为，比如对iFrame应用更高的z索引，并将iFrame中任何内容的背景颜色和背景*指定为“白色”和“不透明”，以便它“浮动”在父html页面上，但这并不完美。我也尝试过类似的方法：

html:not（iframe）：在{}之前

但这也不起作用。我想知道是否有一种方法可以不依赖于“html:before”来创建相同的效果，或者是否有一种方法可以做到这一点，但不让它在页面上iFrame的html中重复

我已经尽了我的努力，试图让这项工作，所以任何帮助将非常感谢。谢谢。

编辑：

我不知道插件的事情，但你可以给你的HTML标签一个ID，并以此为目标，虽然如果你想把它应用到所有的页面，那么这是一个问题

---

或者使用html：第一个孩子？老实说，我不知道会发生什么，您可以尝试一下，不过您可能想尝试不同的路线：

html {
    box-shadow: inset 0 0 0 2000px rgba(2, 3, 3, .35) !important;
}

这样，当用户的浏览器不支持

指针事件时，网页仍然可用

您可能还希望签出此问题：

要将这些样式仅应用于父文档的
元素，而不应用于iFrame，只需将
框阴影应用于
文档。documentElement
与JS:

document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";

CSS不允许在iframe中设置HTML样式。因为您使用的是附加组件，所以这是CSS的非标准实现。iframe不会继承样式，因为iframe基本上是一个新的浏览器窗口。该插件将样式添加到浏览器窗口中的每个HTML页面。浏览器无法知道页面是否位于iframe中（至少不能通过CSS访问）。
不幸的是，无法使用CSS从
iframe
的源代码中仅针对
iframe
的内容，即包含
iframe
元素的页面

我假设，因为您使用的是Style，所以您的CSS位于Firefox用户样式表中。如果是这样，您可能必须查看那些
iframe
s的源URL，创建一个
@-moz文档
规则，将这些URL定位在它们的域中，并相应地删除
html:before
伪元素

像这样的东西，应该放在你已经拥有的东西下面：

@-moz-document domain(/* Facebook Like */), 
    domain(/* Tweet Button */), 
    domain(/* Google +1 */)
{
    html:before
    {
        content: none !important;
    }
}

content:none
声明禁用伪元素，防止其呈现

必须以这种方式排除特定域意味着这种方法非常有限，功能也不是很全面，但这是我能想到的最好的方法。
这是我第一次听到术语夜间浏览
iframe html:before{display:none；}
？
html:not（iframe）
总是非常简单地匹配，因为
html
不是
iframe
。不幸的是，这些都不起作用。我想是这样的：就“时尚”（插件）而言，iframe的html并不知道它是iframe。。因为它首先将更改应用于任何“html”，所以忽略了html位于iframe中的事实。这就是为什么我认为我需要尝试除“html:before”之外的其他方法，以使内容显示在“父”html页面上。考虑到您使用的是时尚，这是用户样式表中的CSS吗？不，当然不会-
html
是根元素，因此在任何情况下都不会匹配。他的CSS如何影响iframe中的文件，我不明白，我猜这与他使用的插件有关，它是Firefox的用户样式表管理器。哦，那就不同了
html:first child
将不匹配，因为
html
是根元素，根元素没有父元素，所以它不是子元素。这很好。谢谢你的建议。。现在找到一种方法使其不适用于iFrame：[.正确，尽管所讨论的附加组件只是Firefox用户样式表的UI前端，它是标准的一部分，也是标准的一部分。对，但是Firefox将样式应用于每个html元素。CSS不会从一个html元素级联到一个html元素中的html元素。它将用户样式表分别应用于这两个元素。I曾经尝试过针对twitter、fb等特定领域的目标定位，但由于某些原因，效果不太好。但是，你的代码工作得非常好。我想这是必须的。我真的很感激。@user1975224:没问题，很高兴我能帮上忙！说实话，我很快就完成了我应该（并且即将）完成的任务去睡觉吧——我现在所在的地方快到早晨了！