Сброс CSS для встроенных скриптов - PullRequest
1 голос
/ 29 марта 2012

Я работаю над приложением JS, которое веб-мастера размещают на своих сайтах.Он добавляет на свой сайт фиксированный элемент с определенной функциональностью, а также тег <style> с css на head страницы для его стилизации.Это очень похоже на wibiya в этом аспекте.

У меня проблемы с поиском правильных правил CSS для этих требований:

  • Мои стили не будут перегружать стили элементовна странице
  • Стиль страницы не будет перегружать мои стили
  • Мой стиль должен по-прежнему иметь преимущество, если страница что-то объявляет important!

IЯ вставляю CSS в DOM, но у меня нет никаких гарантий, что мой стиль является последним, вставленным на страницу.

Я не редактирую элементы внутри страницы.У меня есть контейнер, и все мои элементы находятся в этом контейнере.

Я пробовал сброс CSS Мейера специально для контейнера и всех объектов внутри него, но правила сайта по-прежнему переопределяют мои правила.

Как быЯ подхожу к этому?

Ответы [ 2 ]

1 голос
/ 29 марта 2012

так у вас есть таблица стилей для стилизации вашего "модуля"? вот несколько советов:

  1. переопределить стили, загрузив ваш последний CSS. обычно, чтобы избежать переопределения JQuery UI моими стилями, я загружаю последний CSS для безопасности.

  2. Порядок важности стилей (насколько я помню) в следующем порядке:

    1. стили браузера
    2. стили таблицы стилей
    3. встроенные стили
    4. !important стили
    5. пользовательские / пользовательские стили (пользовательские шрифты и цвета браузера).

    Вот почему библиотеки, такие как jQuery, применяют встроенные стили (в отличие от методов addClass), потому что они всегда переопределяют стили таблицы стилей, независимо от специфики. но вы можете переопределить их, используя !important

  3. Знать специфику . это также причина, по которой таблицы стилей пользовательского интерфейса jQuery имеют очень длинные / специфические объявления стилей. чем конкретнее это, тем сложнее его переопределить. Чтобы продемонстрировать, следующее всегда будет зеленым, даже если после него следует определение красного цвета:

демо

<span class="red">I'm supposed to be red</span>​

span.red{color:green}
.red{color:red}

1040 *

1 голос
/ 29 марта 2012

Вы должны быть более конкретными, чем их правила. Вот статья на эту тему!

Например, если их правило следующее:

.button { background: red; }

Если вы более конкретны:

a.button {}
body .button {}

Ваши правила победят.


Если на встроенной странице используются важные правила, вам нужно использовать более конкретные важные правила.Но постарайтесь не начинать войну правил между вами и сценарием.Результаты обычно неожиданны!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...