logo标签列表

将 CSS 应用于 HTML，但不应用于 iframe 中的 HTML。

htmlcssfirefoxpseudo-elementcss-content
7

我正在为附加组件'stylish'制作用户样式表。

它会在整个页面上应用一个半透明的黑色框，适合夜间浏览。

我正在使用：

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，它将把此代码应用于iframes的HTML，如下图所示：
因为这些社交网络小部件依赖于IFRAME，所以在那些页面上重复该代码，创建了一个半透明暗盒子的双重覆盖。
期望的外观应该是：
我尝试了一些hack-ish的方法，比如在iframes上应用更高的z-index，并指定*中所有东西的background-color和background为'white'和'opaque'，使其浮动在父html页面上方，但这并不完美。 我还尝试了以下内容：
html:not(iframe):before{}

但是这也不起作用。我想知道是否有一种方法可以以不依赖于“html:before”来创建相同的效果，或者是否有一种方法可以这样做，但不要在页面上的iframes的html中重复它。我已经竭尽全力让它工作了，所以任何帮助都将不胜感激。谢谢。
html:not(iframe) 很容易匹配，因为 html 不是 iframe。 - BoltClock
不幸的是，这些不起作用。我认为发生了这种情况：对于“Stylish”（这个插件）而言，一个iframe的html并不知道它是一个iframe，因为它首先应用更改到任何“html”，而无法识别html是否在iframe中。这就是为什么我认为我需要尝试其他方法来使内容出现在“父”html页面上，而不是使用“html:before”。 - fanfare
夜间浏览啊？那么，当您尝试单击链接但由于有一个巨大的框覆盖了一切而什么也没有发生时会发生什么呢？ - Mike Robinson
是的，这是用户样式表。我应该更清楚地说明。 - fanfare
@mike robinson，“pointer-events: none” 可以防止你所描述的情况。 - fanfare
显示剩余5条评论
4个回答
1

您可能想尝试不同的路线：

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

示例

这样，即使用户的浏览器不支持pointer-events，网页仍然可以使用。

您可能还想查看这个问题: CSS - max z-index value

要将这些样式应用于仅父文档的<html>元素而不是iframes，请使用JS将box-shadow应用于document.documentElement:

document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";
这很好。感谢建议..现在要找到一种方法让它不适用于iframes :[。 - fanfare
1
很不幸地，无法使用CSS仅从包含iframe元素的页面内部针对iframe内容进行定位。我假设您正在使用Stylish，因此您的CSS位于Firefox用户样式表中。如果是这样，您可能需要查看那些iframe的源URL，创建一个@-moz-document规则来定位其域名下的URL，并相应地删除html:before伪元素。可以像这样添加代码：
@-moz-document domain(/* Facebook Like */), 
    domain(/* Tweet Button */), 
    domain(/* Google +1 */)
{
    html:before
    {
        content: none !important;
    }
}
content: none声明会禁用伪元素，防止其被呈现。
以这种方式排除特定域名意味着该方法非常受限且不太灵活，但这是我能想到的最好的方法。
我曾尝试过针对 Twitter、FB 等特定领域进行定向，但由于某些原因它并没有完全奏效。然而，你的代码完美地解决了这个问题。我想这就够了。非常感谢你。 :) - fanfare
@user1975224：没问题，很高兴能帮忙！说实话，这只是我匆忙编写的东西，因为我应该（并且即将）去睡觉了——现在我所在的地方几乎是早上！ - BoltClock
0

编辑：

我不知道附加组件的事情，但您可以为HTML标记添加ID并以此方式定位它，但如果您希望将其应用于所有页面，则存在问题。

或者也许可以使用html:first-child？老实说，我不知道会发生什么，但您可以尝试一下。

当然不会-html是根元素，因此在任何情况下都不会匹配。 - BoltClock
他的 CSS 如何影响 iframe 中的文件，我不理解。 - Huangism
我猜这与他使用的插件有关，该插件是 Firefox 的用户样式表管理器。 - BoltClock
哦，那就是另外一回事了。 - Huangism
html:first-child 不会匹配，因为 html 是根元素，而根元素没有父级，所以它不是一个子元素。 - BoltClock
0

CSS 不允许你在 iframe 中样式化 HTML。由于你正在使用一个插件，这是 CSS 的非标准实现。样式不会被 iframe 继承，因为 iframe 基本上是一个新的浏览器窗口。该插件将样式添加到浏览器窗口中的每个 HTML 页面。浏览器无法知道页面是否在 iframe 中（至少不能通过 CSS 访问）。

虽然所讨论的插件仅是 Firefox 用户样式表的 UI 前端，但这些样式表对于层叠（cascade）至关重要，并且绝对是标准的一部分。 - BoltClock
没错，但是Firefox会将样式应用到每个html元素上。CSS不会从一个html元素级联到在iframe中的html元素。它会将用户样式表分别应用于两者。 - aaronburrows
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接