如何提高css規則優先級的一個html片段

我寫了一個HTML/CSS代碼片段，它包含在一些第三方的網站中。
但該網站的CSS規則使我的代碼片段看起來很糟糕。爲了保持片段的外觀，我必須使用！重要的關鍵字，但它是可怕的，我必須寫這個關鍵字約1000次（除了這樣的代碼看起來不是很好）。
我也可以使用內聯CSS而不是外部的.css文件，但它也不是一個解決方案。
那麼，如何以一種優雅的方式保護我的css風格呢？如何提高css規則優先級的一個html片段

來源

2011-05-13 tsds

建議使用具有唯一ID的div是好的。但是，主機頁樣式表中的其他規則有可能使用!important。即使您使用唯一的ID，這些規則也會覆蓋您的規則。

首先使用iframe中的外部文檔（這並非總是可行）的缺點，使用!important是我能看到的唯一100％安全的方式。

來源

2011-05-13 18:58:01

您可以嘗試將您的代碼段放入帶有唯一ID的DIV中。

然後在您的代碼片段樣式的CSS中，爲樣式表中的項目添加DIV的ID選擇器。

來源

2011-05-13 18:55:25 kei

您的代碼段應包含在iframe之內。

這是「第三方網站小部件」的常用方式。

如果您使用iframe，則來自父文檔的CSS不會影響您的「HTML/CSS代碼片段」。

來源

2011-05-13 18:57:52 thirtydot

它不能做，因爲一些JavaScript問題 – tsds 2011-05-13 19:00:49

該網站的CSS使用'！重要'在愚蠢的方式嗎？如果不是的話，那麼建議預先加上「id」的答案肯定會起作用。例如，'#myWidget p {..}'/'#myWidget a'會覆蓋文檔其餘部分的CSS（比如在'body'上設置的東西）。假如你做'#myWidget {/ *設置合理的默認值如字體，行高來避免級聯* /}'，你應該沒問題。 – thirtydot 2011-05-13 19:03:59

我能想到的唯一方法就是讓選擇器在某些方面更加具體。例如，

LI { color: red; } 

LI.class { color: blue; } 

<li class="class">I will be blue</li>

但是你真的受到了'你無法控制的其餘CSS'的擺佈。

我認爲你最好的選擇是把ID和獨特的課程放在所有yoru的東西上，並且指定它。這雖然不是很好，但是因爲您可能想要申請一些「剩餘的CSS」。

來源

2011-05-13 18:57:58 n8wrl

如果'重要'不會這樣做，我不相信增加選擇器的特異性。 – BoltClock 2011-05-13 19:00:19

重要可能不支持任何地方。看到這個：http://stackoverflow.com/questions/189621/when-does-csss-important-declaration-not-work – n8wrl 2011-05-13 19:14:00

！重要的是不會覆蓋內聯樣式，但第三方網站不能修改我的html標籤，所以情況並非如此。 – tsds 2011-05-13 19:20:55

如果你不能使用iframe方法，你需要找出父頁面聲明所具有的specificity的級別，並且用你的樣式聲明來打敗它，記住它們仍然適用於你不要清除它們。否則，請帶上「！重要」！你可能想要找一個clear.css或者其他的東西來爲你做這件事，因爲很多網站都提供這個功能。

來源

2011-05-13 19:12:44 Briguy37

如何提高css規則優先級的一個html片段

回答

相關問題