覆蓋內部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

回答

相關問題