僅適用於#widget的CSS重置

比方說，我有一個使用複雜CSS的小部件，並且必須嵌入到多個網站中，這些網站都有它們的CSS。僅適用於#widget的CSS重置

如果我將所有小部件的CSS規則作爲「#widget」的前綴，它們將不適用於外部的任何內容，因此修復了一個問題。不幸的是，該網站的CSS規則仍然可能會弄亂小部件。

如果我通過適當的重置規則重置#widget中的所有CSS，那麼希望它們會覆蓋所有外部規則，對吧？（因爲我的規則使用#id和外部規則不知道我的小部件中的任何ID，他們不能覆蓋它們，對吧？！儘管重要）

什麼是將所有CSS重置爲已知狀態的最佳方法？大多數CSS重置從瀏覽器默認開始，他們不重置任意CSS。有沒有任何CSS重置工作，無論是什麼？

2009-10-09 taw

2009-10-09 11:52:59 easement

是的，你的CSS應該覆蓋部件外聲明任何東西，但你的重置必須是相當全面。我建議使用 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/的修改版本，但是您必須自己修改所有選擇器。

我會受到誘惑，以加強你的選擇也，故而不

#widget tagname{}

使用

html body #widget tagname{}

你選擇現在將有一個更高的權重。

2009-10-09 11:59:46 Rowan

我覺得小部件可以放置在任何網頁上，以便您需要重置CSS是未知的。爲了完全安全，他需要在#widget前綴全局重置規則（如Eric Meyer的規則）。 – easement 2009-10-09 12:02:44

我完全同意（我也鏈接到它） – Rowan 2009-10-09 12:31:47

埃裏克的重置似乎只是重置瀏覽器的默認值，並不是所有可能被CSS的東西，所以他們可能還不夠。 – taw 2009-10-09 13:02:19

我碰到cleanslate.css來試圖解決同樣的問題：

我還沒有在生產中使用它，但它顯然就出來了BBC世界服務的發展小部件。

2009-12-20 21:52:14

注意 - CleanSlate項目已經從谷歌代碼移動到GitHub：https：//github.com/premasagar/cleanslate （我創建了項目 - 是的，它解決了這個問題;） – Premasagar 2011-01-15 00:02:06

使用命名空間&重置& LESS

#my-ns { 
    @import ".../reset.less"; 

    ... your other styles ... 
}

2012-07-11 22:26:43

回答