如何「禁用」覆蓋我的CSS的內聯樣式？

我正在編寫一個Chrome擴展程序來修改Squarespace的用戶界面，它將「CSS」覆蓋在您網站的頂部，以顯示基於瀏覽器的網站構建器。如何「禁用」覆蓋我的CSS的內聯樣式？

比方說，這是我的身體CSS：

body { 
background-color: #000000; 
background-image: url("/storage/body.jpg"); 
background-repeat: no-repeat; 
background-position: top center; 
}

當你打開Squarespace的用戶界面，它增加了一些類與聯樣式的CSS。因此，這是自動添加到我的代碼：

{ 
padding-top: 56px; 
background-position: 50px 56px; 
}

所以，因爲我修改用戶界面使用CSS Chrome擴展我想基本上是「跳過」或「禁用」被添加的內嵌樣式。我可以在我的擴展CSS上使用！important，但有些網站可能會使用不同的背景位置，我不想只放置「background-position：top center！important;」在我的擴展。我也不想僅僅使用腳本去掉這些類，因爲它們也用於其他樣式。

謝謝！

來源

2011-11-21 jasonbarone

'！important'是覆蓋內嵌樣式的唯一途徑。 –

如果你絕對要保持你的內嵌樣式（如，不動你的風格，以外部stylsheet，或者至少在你<head>一個<style>元素），然後使用

myElement 
{ 
    background-position: center !important; 
}

這是字面上的唯一CSS方式來做到這一點。

您可以使用Javascript來查找元素的屬性並根據需要更改它，但!important是CSS中唯一可以重寫內聯樣式的東西。

http://jsfiddle.net/Kyle_Sevenoaks/TXmC7/

來源

2011-11-21 13:25:50 Kyle

如何「禁用」覆蓋我的CSS的內聯樣式？

回答

相關問題