How can I “disable” an inline style that is overwriting my CSS?

StackOverflow https://stackoverflow.com/questions/8211990

题

I'm writing a Chrome Extension to modify the user interface of Squarespace, which "overlays" CSS on top of your website in order to display the browser-based website builder.

Let's say this is my body CSS:

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

When you open up Squarespace's user interface, it adds a few classes to the CSS with inline styling. So this is added to my code automatically:

{
padding-top: 56px;
background-position: 50px 56px;
}

So since I'm modifying the user interface with a CSS Chrome Extension I want to essentially "skip" or "disable" those inline styles from being added. I could just use !important on my extension CSS, but some websites might use a different background-position, I don't want to just put "background-position: top center !important;" in my extension. I also don't want to just strip the classes using a script because they're also used for other styling.

Thanks!

有帮助吗？

解决方案

If you absolutely have to keep your inline styles (as in, not moving your styles to an external stylsheet, or at least a <style> element in your <head>) then use

myElement
{
    background-position: center !important;
}

This is literally the only CSS way to do it.

You could use Javascript to find the attribute of the element and change it if you wanted, but !important is the only thing in CSS that can override inline styles.

:)

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top