我可以在樣式表中覆蓋元素的內聯樣式嗎？

Question

我想強制我的系統之一上的所有文本以一種字體類型顯示。 但是，人們經常粘貼帶有各種不同格式的內聯樣式的文本。

我可以在樣式表中覆蓋元素的內聯樣式嗎？ '！important'還不夠！

Answer 1

您可以使用CSS代碼覆蓋內聯樣式，該CSS代碼使用!important說明符將字體系列分配給所有相關元素，例如

* { font-family: Calibri !important; }

僅在body元素上設置字體是不夠的，因為這樣內部元素的字體就受到適用於它們的規則的控制。 僅當沒有 CSS規則在內部元素上設置字體時，內部元素才會從其父級繼承字體。

如果某人能夠注入具有!important的內聯樣式，則您無法在CSS中擊敗它。 您將需要使用JavaScript處理文檔，刪除或更改style屬性。

Answer 2

內聯樣式規則至上。

您可以執行此操作，但需要使用JavaScript進行操作。 該代碼必須基本上從粘貼的代碼中刪除所有內聯樣式語句。 無論如何，這是一個好主意，您永遠不知道人們會粘貼什么。

使用jQuery：

$('.wrapper *').removeAttr('style'); 

...您的內容位於具有“包裝器”類的div中

Answer 3

您不需要JavaScript。 不管您怎么說， !important確實足夠。

測試案例： http ： //jsfiddle.net/jezen/Z4rnv/

說明：CSS規則是根據指定的級別選擇的，指定級別是由布局引擎計算的。 !important規則不是一個全面的修飾符。 它只是為特異性層次結構中的相應規則增加了額外的權重。

Answer 4

使用jQuery remove屬性函數可以解決問題。

removeAttr( 'style' );

Answer 5

我對其他兩個答案的非特定性質感到不滿意。

* { font-family: Calibri !important; }

有時不一定總是可以工作，例如在處理跨度時需要更具體

span { font-family: Calibri !important; }

足夠具體，因為盡管您正在為值添加重要的內容。

如果最初的字體樣式只是使用諸如font-family和font-size之類的字體，則字體樣式的類型也很重要，因此使用

span { font:15px arial,sans-serif; !important; }

不會覆蓋的內聯樣式

<span style="font-family: Calibri">Hello World</span>