Как остановить все переопределения CSS в контейнере DIV?

Question

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

Есть ли способ остановить любые переопределения в этом div?

Answer 1

Хост-сайт должен иметь свои свойства CSS, определенные с уведомлением ! Важный (цвет: красный! Важный;).

Или вы можете добавить свои стили в DIV, используя JavaScript ( jQuery ). Вы можете проверить, есть ли в DIV стиль, поэтому вы можете добавить или не добавлять какой-либо из ваших стилей.

Answer 2

вы можете определить свойства CSS внутри элемента, чтобы иметь возможность правильно отображать ваш div, например,

<div style="margin:0;border:1px solid red;">

Или, кроме того, вы можете добавить свои CSS-стили в ваш HTML-файл Div.

Я знаю, это больно, когда «внешний» сайт имеет глобальные правила CSS; например,

ul ( margin-left: 5px; } 

лучшее, что я мог сделать, это сбросить все эти вещи для моего идентификатора div.

UPDATE:

Да, я понимаю, что у него есть встроенные стили, но проблема вызвана глобальными правилами. Так, например если у div @Amr ElGarhy есть UL, то все они получат левое поле в 5px (как я показал выше). и Amr ElGarhy должен сбросить это поле также и во встроенных стилях.

Answer 3

Если! Важный использовался (плохо) на хостинге, то вы переходите на встроенные стили (опять плохо), но эй.

Если они этого не сделали, и пример того, что вы пытаетесь переиграть, похож на другой плакат, который сказал:

ul ( margin-left: 5px; }

тогда вы можете просто использовать вес селектора, чтобы убедиться, что ваш стиль тяжелее, чем их стиль, т.е.

#mycontainingDivElement ul { blah:blah }

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