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;" 在我的扩展中.我也不想只使用脚本剥离类,因为它们也用于其他样式.
谢谢!
如果你必须保持你的内联样式(如,不将你的样式移动到外部样式表,或至少是<style>
你的元素<head>
),那么使用
myElement
{
background-position: center !important;
}
Run Code Online (Sandbox Code Playgroud)
这实际上是唯一的CSS方法.
您可以使用Javascript来查找元素的属性并根据需要进行更改,但!important
CSS中唯一可以覆盖内联样式的东西.
:)
http://jsfiddle.net/Kyle_Sevenoaks/TXmC7/