Question

我目前正在为一个论坛（diskusjon.no）制作一个自定义CSS，但我一直在努力寻找页面的某个部分。 IPBoard-forum中的编辑器是原始html标签内的html标签，我通过扩展名Stylish设置的CSS无法到达页面的这一部分。

结构是这样的：

<<html> <---lots of tags--> <iframe> <html> <body contenteditable=true>

现在我的风格会影响除第二个html标签之后的所有内容，所以我的问题是; - 当我通过Stylish添加我的CSS时，它可以完全到达页面的这一部分。即我无权访问任何HTML。

以下是我正在谈论的部分Google Inspector的图片：

Answer 1

由于<iframe>标记旨在加载外部页面，因此它将拥有自己的样式表。然后，你的风格不能干涉它。

解决方案是在页面加载到iframe后使用javascript。您可以参考：How to apply CSS to iframe?问题。

Answer 2

时尚将页面视为相同，无论它是否在iframe中。因此，解决方案就是单独设置iFramed位的样式。

例如，假设您有页面jsbin.com/osajuz/edit，并且它包含此iFrame：

<iframe src="http://www.drudgereport.com/"></iframe>

然后你可以创建一个时尚的风格，如：

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://jsbin.com/osajuz") {
    body {
        background-color: pink;
    }
}

@-moz-document url("http://www.drudgereport.com/") {
    body {
        background-color: lime !important;
    }
}

有效。

如果您创建样式并访问jsbin.com/osajuz，您会看到如下内容：

iFrame style preview

同样，如果框架没有URL，则将其视为与包含页面相同的域和URL的页面。时尚的规则仍然适用。

例如，如果您创建此时尚风格：

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsbin.com") {
    body {
        color: orange;
    }
}

@-moz-document url-prefix("http://jsbin.com/abazay/3/edit") {
    body {
        background: lime;
    }
}

然后访问jsbin.com/abazay/3/edit#preview，您会看到两种风格都适用于“内部”iFrame。

但注意，无论JS运行什么，iFrame都可以覆盖CSS样式，如果你不小心的话。因此，自由使用!important标志来解决这个问题。

CSS涵盖内部html标记内的内容

2 个答案: