将css应用于html而不是iframe html [英] apply css to html but not iframe html

问题描述

我为附加版时尚制作了用户样式表。

I'm making a user stylesheet for the add-on 'stylish.'

它在整个页面上应用半透明深色框，用于夜间浏览。

It applies a semi-transparent dark box over the entire page for night-browsing.

我正在使用：

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。

to create the fixed, overlying div.

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

This works just fine, however, if there are any iframes in the site, it will apply this code into the iframes' HTML as well as you can see here:

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

because these social networking widgets rely on an IFRAME, its repeating the code into those pages, creating a double-overlaying of the semi transparent dark box i've made.

/ em>看起来会是：

the desired look would be:

我尝试过hack-ish的东西，比如对iframe应用一个高得多的z-index，并将iframe中任何东西的背景颜色和背景指定为white和'opaque'，以便它浮动在父HTML页面的顶部，但这不工作完美。我也试过像：

I've tried hack-ish things, like applying a much-higher z-index to iframes and specifying the background-color and background of * of anything in the iframes to 'white' and 'opaque' so that it 'floats' on top of the parent html page, but this doesn't work perfectly. i've also tried something like:

html:not(iframe):before{}

但这也不起作用。我想知道是否有一种方法来做我想要做的方式，不依赖于html：before创建相同的效果，或者如果有一种方法，但没有它在页面上的iframe的html内重复。

but this also doesn't work. I'm wondering if there is a way to do what I'm trying to do in a way that doesn't rely on 'html:before' to create the same effect, or if there's a way to do that but not have it repeat inside the html of iframes on a page.

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

I've exhausted my efforts trying to get this to work, so any help would be really appreciated. Thank you.

推荐答案

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

Unfortunately, there is no way using CSS to target only the contents of an iframe from within the source of the iframe, i.e. the page that contains the iframe element.

我假设，因为你使用Stylish，你的CSS是在Firefox用户样式表。如果是这样，您可能需要查看 iframe 的源网址，创建一个 @ - moz-document 规则定位到其域中的那些URL，并相应地删除 html：before 伪元素。

I'm assuming, since you're using Stylish, that your CSS is in a Firefox user stylesheet. If so, you may have to look at the source URLs of those iframes, create a @-moz-document rule targeting those URLs at their domains, and remove the html:before pseudo-element accordingly.

，它应该在你已经有的底下：

Something like this, which should go beneath what you already have:

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

content：none 声明禁用伪元素，阻止它被呈现。

The content: none declaration disables the pseudo-element, preventing it from being rendered.

必须以这种方式排除特定域意味着这种方法是非常有限的，非常多才多艺，但它是我能想到的最好的。

Having to exclude specific domains in this manner means this method is extremely limited and not very versatile at all, but it's the best I can think of.

这篇关于将css应用于html而不是iframe html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！