覆盖内部html标签内容的CSS

我目前正在为一个论坛（diskusjon.no）制作一个自定义CSS，但我一直在努力处理页面的某个部分。 IPBoard论坛中的编辑器是原始html标记中的html标记，并且通过扩展名Stylish设置的CSS无法访问此页面的这一部分。覆盖内部html标签内容的CSS

的结构是这样的：

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

现在我的风格影响，除了第二HTML标签后什么，所以我的问题是一切; - 当我通过Stylish添加我的CSS时，有可能达到页面的这一部分。即我没有访问任何HTML。

下面是谷歌督察对我谈论的部分图片：

来源

2011-12-01 timss

由于标签旨在加载外部页面，它将有它自己的样式表。那么，你的风格不能干涉它。

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

来源

2011-12-01 23:56:00 AlQafir

JavaScript不是必需的，它也不适用于***时尚***问题。 –

时尚对待页面相同，无论它是否在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的两种风格。

但note无论JS如何操作，iFrame都可以覆盖CSS样式，如果您不小心。因此，请自由使用!important标志来解决此问题。

来源

2011-12-02 00:59:54

iframe是内部的，并且没有获得URL（如图所示）。那么我怎么能用我的CSS来达到它，而不使用上面提到的JS？ – timss

这是一样的，看我更新的答案。请注意，您可能需要在样式中使用'！important'。 –

谢谢，我可以看到你的例子中的iFrames的内容受到我时尚风格的影响，但是我无法将它移植到我正在处理的页面上。我仍然无法设法影响我尝试编辑的iFrame的内容。我做了一个域/ url-prefix和body/body.withRTL + background：lime！在每一个可能的组合中都很重要，它仍然不会在编辑器中将背景设置为石灰。 iFrame得到它自己的风格标签，但应该做！重要覆盖这个？我很困惑，在body/body.withRTL不起作用时，我能够“到达”iFrame内部的身体标签。 – timss

覆盖内部html标签内容的CSS

回答

相关问题