CSS запутывается, когда скрипт вводится

Question

Я создал расширение, которое всякий раз, когда пользователь посещает некоторые конкретные сайты, я вставляю свой скрипт в верхнюю часть веб-страниц. Я использовал

document.body.insertBefore(wrapperDiv, document.body.firstChild)

для этого.

Теперь проблема: CSS внедренного скрипта испорчен для каждого сайта (отличается от одного сайта к другому).

Как мне поддерживать единую структуру CSS для всех сайтов?

Answer 1

Используйте уникальные селекторы для ваших элементов (будь то классы с определенным префиксом или идентичные идентификаторы), но вы, вероятно, пытаетесь включить CSS вместе со своим сценарием, что может быть не очень хорошей идеей.

В некоторых случаях встроенный стиль - лучшая идея - он перезапишет все стили для ваших элементов и обеспечит согласованность внешнего вида этих элементов на разных страницах.

Итак, я бы сказал, используйте встроенный стиль.

Для документации по , как стили перезаписываются в CSS 2.1 , см. Следующую страницу: http://www.w3.org/TR/CSS21/cascade.html#specificity

Answer 2

Вы сможете решить эту проблему, используя уникальные идентификаторы для своих HTML-тегов с помощью CSS.

То есть, если ваши свойства DIV CSS влияют на их DIV CSS, добавьте ID #uniqueNameHere к вашему DIV и установите CSS для # ID.

Эта страница, посвященная использованию ключевого слова !important, также может быть полезна.

http://css -tricks.com / 9462-когда-используя важный-это-заместитель правого выбора /