Question

我正在编写Chrome扩展程序以修改Squarespace的用户界面，该界面会在您的网站顶部“叠加”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;”在我的扩展中。我也不想只使用脚本剥离类，因为它们也用于其他样式。

谢谢！

Answer 1

如果您必须保留内联样式（例如，不将样式移动到外部样式表，或至少<style>中的<head>元素，那么请使用

myElement
{
    background-position: center !important;
}

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

您可以使用Javascript查找元素的属性并根据需要进行更改，但!important是CSS中唯一可以覆盖内联样式的内容。

：）

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

如何“禁用”覆盖我的CSS的内联样式？

1 个答案: