2011-11-21 2 views
1

Я пишу расширение Chrome, чтобы изменить пользовательский интерфейс Squarespace, который «накладывает» CSS поверх вашего сайта, чтобы отобразить веб-сайт, основанный на браузере.Как я могу «отключить» встроенный стиль, который переписывает мой 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; 
} 

Так, так как я модифицирование пользовательского интерфейса с Chrome Extension CSS Я хочу, чтобы по существу «пропустить» или «отключить» эти встроенные стили добавляются. Я мог бы просто использовать! Важно для моего расширения CSS, но некоторые веб-сайты могут использовать другую фоновое положение, я не хочу просто ставить «background-position: top center! Important»; в моем расширении. Я также не хочу просто стирать классы с помощью скрипта, потому что они также используются для другого стиля.

Спасибо!

+0

'! Important' это единственный способ, чтобы переопределить встроенный стиль. –

ответ

4

Если вы абсолютно должны держать свои встроенные стили (как, не двигая стили к внешнему stylsheet, или по крайней мере <style> элемента в вашем <head>), затем используйте

myElement 
{ 
    background-position: center !important; 
} 

Это буквально только CSS способ сделать это.

Вы можете использовать Javascript, чтобы найти атрибут элемента и изменить его, если хотите, но !important - это единственное в CSS, которое может переопределять встроенные стили.

:)

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