CSS：命名空間的一塊HTML

我正在構建一個瀏覽器擴展插件，將HTML插入一些頁面。我希望頁面的CSS不適用於此部分。做這個的最好方式是什麼？是否有一個很好的重置，我可以把它放在我的HTML的根元素上，並將其設置爲！重要，以便在其他人之後應用！CSS：命名空間的一塊HTML

來源

2010-04-20 Paul Tarjan

還有這個http://snipplr.com/view/7438/element-specific-css-reset/ – ant 2010-04-20 08:01:09

至100％拿出來級聯的唯一辦法是把它的iframe內。

你可以使用一個CSS樣式表復位，但只是前面加上你的根元素ID /課堂上的一切。這將對抗這些效果很長的路要走，但在這個領域你可能不得不做一些更多的最終調整。

也許最好的辦法是簡單地設置你的子規則一切合理的財產。所以我的意思是設置背景，前景，字體，大小等等等。完全定義規則，以便他們準確地說出你想要的內容，並且不會留下任何空間讓級聯填充默認值感興趣的

來源

2010-04-20 07:29:39 rtpHarry

如果我做一個IFRAME，那麼我無法從頁面上的javascript與它進行交互（由於跨域策略）:( – 2010-04-20 16:21:17

是的我同意，iframe不是一個很好的解決方案，但在阻止css方面它是100％的解決方案。如果這是爲你自己使用，那麼我只需設置一堆規則，！對他們很重要，並且完全定義了你希望盒子的工作方式，可能會出現一些情況，有些東西會泄漏，但是如果你正在消耗這些東西，那麼打破它時應該很簡單，這是爲你還是爲了重新分配？ – rtpHarry 2010-04-21 08:21:00

重新分配:(我想我將不得不廣泛測試它，我懷疑人們會修補它.. – 2010-04-22 16:05:36

你可以使用一個CSS復位，它僅適用於你的頁面的一個子集。例如this one。

My page 
<div id="no-css"> 
blah blah this has no css 
</div>

當然，你必須在復位範圍內的一切，例如：

ol, ul { 
    list-style: none; 
}

應該是：

#no-css ol, #no-css ul { 
    list-style: none; 
}

爲了簡化這個問題，我建議使用CSS 「框架」像Less它簡化了這樣的事情：

#no-css{ 
    /* Big copy and paste of all the reset css file */ 
}

使用這個較少的代碼，您可以使用較少的代碼，或者只是生成一個新的reset.css文件並正常使用它。

當然，你也可以找到一個element specific reset但是這種解決方案可以讓你選擇你喜歡的任何復位之最。

另一種解決方案是將頁面嵌入到iframe中。

來源

2010-04-20 08:05:19 marcgg

我在我的元素上設置一個根類，並把一個完整的重置它（第一個評論中的那個）。然後我在裏面有子類（比如'title'），但是那個頁面的CSS'.title {background：blue}'應用得比我的'.paulsnamespace {background：none}'更緊密。我怎麼能阻止呢？ – 2010-04-20 16:20:22

這似乎仍然是2012年最好的方式 - 我用它來命名空間我的網站在薩斯的網頁。這是我唯一使用ID的方式 - 它們通過靜態站點生成器自動分配給元素，然後所有頁面的CSS通過Sass「'@ import」進行連接。 – iono 2012-12-04 08:42:11

CSS：命名空間的一塊HTML

回答

相關問題