将css应用于html而不是iframe html

Question

我正在为附件"时尚"制作一个用户样式表.

它在整个页面上应用半透明暗盒进行夜间浏览.

我正在使用:

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,它将代码重复到这些页面中,创建了我所制作的半透明暗盒的双重覆盖.

将所需的外观将是:

我尝试了很多东西,例如将更高的z-index应用于iframe,并将iframe中任何内容的背景颜色和背景指定为'white'和'opaque',以便它'浮动'父html页面的顶部,但这不能很好地工作.我也试过类似的东西:

html:not(iframe):before{}

但这也行不通.我想知道是否有办法以不依赖'html:before'来创建相同效果的方式做我正在尝试做的事情,或者是否有办法做到但没有它在页面上的iframe的html内重复.

我已经用尽了努力让它发挥作用,所以任何帮助都会非常感激.谢谢.

Answer 1

不幸的是，没有办法使用 CSS 来仅定位iframe源中的内容iframe，即包含iframe元素的页面。

由于您使用的是 Stylish，我假设您的 CSS 位于 Firefox 用户样式表中。如果是这样，您可能需要查看这些 URL 的源 URL iframe，创建@-moz-document针对这些 URL 的域的规则，然后删除html:before相应地删除伪元素。

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

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

这content: none声明禁用伪元素，防止其被渲染。

必须以这种方式排除特定域意味着这种方法极其有限并且根本不是很通用，但这是我能想到的最好的方法。