如何破壞CSS繼承？

我已經創建了一個Web小部件。我的客戶放入他們的網站。基本上負載它調用Web服務並加載特定於客戶端的數據。如何破壞CSS繼承？

因此，它看起來像：

<div class="widget"> 
    <div class="container"> 
    </div> 
</div>

動態我CSS樣式應用於我的widget類。與我們的企業風格保持一致。

問題是客戶端應用程序樣式覆蓋我應用運行時的樣式。

例如，如果客戶有，它會覆蓋我的風格：

body { 
    margin: 0 auto; 
    padding: 0; 
    width: 90%; 
    font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman"; 
}

有什麼辦法打破繼承？只是說任何具有類小部件樣式的div都不會繼承父類型。

來源

2012-08-07 German

您可能想要嘗試每一塊CSS上的！important標記。它會覆蓋任何不重要的東西。 – ntgCleaner 2012-08-07 17:04:08

只需在iframe中運行小部件 – Esailija 2012-08-07 17:06:24

我不認爲你可以按照說法來破壞CSS繼承，但你可以嘗試遵循CSS特殊性的規則來繞過它。

特異性好文章

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

嘗試增加!important到風格的小部件給它比默認樣式較高的特異性。

#myWidget{ 
    font: 100%/1 "Times New Roman", Serif !important; 
}

編輯

如果客戶端還使用!important它可能會導致問題。如果您可以通過示例設置jsFiddle.com，我們可以幫助您找到問題。

我希望有幫助！

EDIT2

注意，打算加入!important的路線應該是最後的手段，因爲它的樣式規則的「王牌」。

來源

2012-08-07 17:03:23 jmbertucci

我試圖給我的樣式添加重要的標籤，但仍然客戶端樣式優先於我的樣式。 – German 2012-08-07 17:07:27

這仍然可以歸結爲特殊性問題。我會用更多的解釋更新我的答案。但我會建議快速閱讀該文章。它會幫助你計算你的CSS文件的特異性，並使其高於客戶端的樣式。 – jmbertucci 2012-08-07 17:10:01

你不能像這樣破壞樣式繼承，但是你可以確保你的樣式更重要，或者按照正確的順序加載，這樣你的樣式就顯得很重要。

看看!important標籤。

或者，如果你的樣式表在你的樣式表之後加載你的樣式表（除非它們是內聯的）。你可以使用Javascript來加載你的樣式後身體已經加載（但是，你會得到一個「閃爍」的效果）。

來源

2012-08-07 17:03:09

我試圖添加對我的樣式很重要的標記，但仍然客戶端樣式優先於我的樣式。 – German 2012-08-07 17:04:23

如果他們也使用重要的標籤，那麼你運氣不好，恐怕沒有使用一些JavaScript來刪除他們的風格。 – 2012-08-07 17:08:40

您不能強制元素不繼承父類型。

但是，您可以覆蓋不想更改的所有可能樣式。如果您的CSS特異性高於客戶的特異性，那麼您的風格將在頁面上占主導地位。

請參見：

CSS Specificity via css-tricks.com

根據您的使用如下面的代碼會比body聲明更具體，從而覆蓋：

.widget .container { 
    font-family: Arial; 
}

來源

2012-08-07 17:08:48 PJH

你也可以嘗試inline styling。內聯樣式具有最高的優先級。如果客戶端覆蓋使用導入的樣式表，這將工作。

和其他人一樣，另一種選擇是!important。

您也可以在http://www.w3.org/TR/CSS2/cascade.html的地方閱讀相關規格，在那裏他們描述了它們如何級聯。如果上面提到的技巧不起作用，也許規格會給你一個線索，或者你肯定會知道這是不可能的。

來源

2012-08-07 17:10:40 Nasir

使用！important.css屬性被認爲是不好的做法。因爲它引入了優先級衝突的可能性，並且使得從長遠來看對css進行故障排除非常困難。

一個缺少強制的方法解決這個問題是一個id來界定你的小部件，並在樣式表中，重置的一些最重要的樣式聲明中使用的「通用」選擇，如：

#myWidget *{ 
    margin: 0; 
    padding: 0; 
    background: none; 
    border: none; 
}

例如，

。然後，專門定義您的覆蓋。

來源

2015-10-22 07:49:05 Argo

如何破壞CSS繼承？

回答

相關問題