Remove/reset унаследованный css из элемента

Я знаю, что этот вопрос задавали раньше, но прежде чем отмечать его как дубликат, я хочу сказать вам, что моя ситуация немного отличается от того, что я нашел в Интернете.

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

Моя проблема в том, что некоторые веб-сайты объявляют стили для div, которые также унаследованы моим div.

например:

div{
    background-color:red;
}

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

Единственные решения, с которыми я прихожу, это перезаписать как можно больше css-приличий, таким образом мой div будет отображаться точно так, как я хочу. Проблема с этим решением заключается в том, что слишком много css-прилоений для перезаписывания, и я хочу, чтобы мой script был таким же легким, как это может быть.

Итак, мой вопрос в том, что вы знаете другое решение моей проблемы. Это может быть в css/javascript/jQuery.

Спасибо

Ответ 1

"сброс" стилей для определенного элемента невозможен, вам придется перезаписать все стили, которые вам не нужны/нужны. если вы сделаете это с помощью css напрямую или с помощью jquery, чтобы применить стили, зависит от того, что вам проще (но я не буду рекомендовать использовать javascript/jquery для этого, поскольку он полностью не нужен).

Если ваш div - это своего рода "виджет", который может быть включен в другие сайты, вы можете попытаться связать его с iframe. это будет "reset" стили, потому что его содержимое - это другой документ, но, возможно, это влияет на работу вашего виджета (или, может быть, полностью его разбивает), поэтому это может быть невозможно в вашем случае.

Ответ 2

Установите только соответствующие/важные свойства CSS.

Пример (только изменить атрибуты, которые могут привести к тому, что ваш div будет выглядеть совершенно иначе):

background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
word-spacing: normal;
z-index: auto;

Выберите очень специфичный селектор, например div#donttouchme, <div id="donttouchme"></div>. Кроме того, перед каждой точкой с запятой в декларации вы можете добавить `! Important. Ваши клиенты намеренно пытаются испортить вашу планировку, когда этот вариант не работает.

Ответ 3

Вы можете попробовать переписать CSS и использовать auto

Я не думаю, что это будет работать с цветом, но я столкнулся с проблемой, когда у меня было родительское свойство, например

.parent {
   left: 0px;
}

а затем я смог просто определить мой ребенок с чем-то вроде

.child {
   left: auto;
}

и эффективно "reset" свойство.

Ответ 4

Попробуйте: Создайте простой div без какого-либо стиля или содержимого вне красного div. Теперь вы можете использовать цикл для всех стилей простого div и назначить затем вашим внутренним div - reset всем стилям.

Конечно, это не сработает, если кто-то присваивает стили всем div (т.е. без использования класса. CSS будет div { ... }).

Обычное решение для подобных задач - дать вашему div отдельный класс. Таким образом, веб-дизайнеры сайтов могут настроить стиль вашего div, чтобы вписаться в остальную часть дизайна.

Ответ 5

Пока они являются атрибутами, такими как классы и идентификаторы, вы можете удалить их с помощью модификаторов класса javascript/jQuery.

document.getElementById("MyElement").className = "";

Невозможно удалить определенный тег CSS, кроме как переопределить их (или использовать другой элемент).

Ответ 6

вы можете использовать этот параметр ниже.

<style>
  div:not(.no_common_style){
      background-color:red;
  }
</style>

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

<div class="no_common_style">
  It will not display in red
</div>

Ответ 7

Из того, что я понимаю, вы хотите использовать div, который наследует ни один класс, кроме вашего. Как уже упоминалось в предыдущем ответе, вы не можете полностью reset наследовать div. Однако то, что сработало для меня с этой проблемой, было использование другого элемента, который не является частым и, конечно же, не используется на текущей странице html. Хорошим примером является использование вместо него настройки, чтобы он выглядел так же, как ваш идеал.

area { background-color : red; }

Ответ 8

Один простой подход заключается в использовании модификатора !important в css, но это может быть отменено таким же образом от пользователей.

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