如何“禁用”覆盖我的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的内联样式？

回答

相关问题