1

我正在编写一个 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，但有些网站可能使用不同的背景位置，我不想只放“背景位置：顶部中心！重要；” 在我的扩展中。我也不想只使用脚本剥离类，因为它们也用于其他样式。

谢谢！

4

1 回答 1

5

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

myElement
{
    background-position: center !important;
}

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

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

:)

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

于 2011-11-21T13:25:50.723 回答