Как я могу «отключить» встроенный стиль, который переписывает мой CSS? - PullRequest
Новая
       19

Как я могу «отключить» встроенный стиль, который переписывает мой CSS?

1 голос
/ 21 ноября 2011

Я пишу расширение Chrome для изменения пользовательского интерфейса Squarespace, который «накладывает» CSS поверх вашего сайта, чтобы отобразить конструктор сайтов на основе браузера.

Допустим, это мойbody 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 CSS, я хочу по существу «пропустить» или «отключить» эти встроенные стили от добавления.Я мог бы просто использовать! Important в своем расширении CSS, но некоторые веб-сайты могут использовать другое background-position, я не хочу просто помещать "background-position: top center! Важный;"в моем расширении.Я также не хочу просто вырезать классы, используя скрипт, потому что они также используются для других стилей.

Спасибо!

1 Ответ

5 голосов
/ 21 ноября 2011

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

myElement
{
    background-position: center !important;
}

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

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

:)

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

...