如何"禁用"覆盖我的CSS的内联样式?

jas*_*one 1 css class squarespace inline-styles

我正在编写一个Chrome扩展程序来修改Squarespace的用户界面,它会在您的网站顶部"叠加"CSS,以便显示基于浏览器的网站构建器.

让我们说这是我的身体CSS:

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

当您打开Squarespace的用户界面时,它会使用内联样式向CSS添加一些类.所以这会自动添加到我的代码中:

{
padding-top: 56px;
background-position: 50px 56px;
}
Run Code Online (Sandbox Code Playgroud)

因此,由于我正在使用CSS Chrome扩展程序修改用户界面,因此我希望基本上"跳过"或"禁用"这些内联样式.我可以在我的扩展CSS上使用!important,但有些网站可能会使用不同的背景位置,我不想只放"background-position:top center!important;" 在我的扩展中.我也不想只使用脚本剥离类,因为它们也用于其他样式.

谢谢!

Kyl*_*yle 5

如果你必须保持你的内联样式(如,不将你的样式移动到外部样式表,或至少是<style>你的元素<head>),那么使用

myElement
{
    background-position: center !important;
}
Run Code Online (Sandbox Code Playgroud)

这实际上是唯一的CSS方法.

您可以使用Javascript来查找元素的属性并根据需要进行更改,但!importantCSS中唯一可以覆盖内联样式的东西.

:)

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