Удалить / сбросить унаследованный CSS от элемента

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

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

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

например:

div{
    background-color:red;
}

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

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

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

Спасибо

Источник

8 ответов

Решение

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

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

Источник

Только установите соответствующие / важные свойства 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>, Кроме того, вы можете добавить `! Важное перед каждой точкой с запятой в объявлении. Ваши клиенты намеренно пытаются испортить вашу планировку, когда эта опция не работает.

Источник

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

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

.parent {
   left: 0px;
}

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

.child {
   left: auto;
}

и это эффективно "сбросить" свойство.

Источник

Технически то, что вы ищете, это неустановленное значение в CSS:

Ключевое слово unset CSS сбрасывает свойство до унаследованного значения, если оно наследуется от своего родителя, и до его начального значения, если нет. Другими словами, он ведет себя как ключевое слово inherit в первом случае и как ключевое слово initial во втором случае. Его можно применить к любому свойству CSS, включая сокращение all.

.customClass {
  /* specific attribute */
  color: unset; 
}

.otherClass{
  /* unset all attributes */
  all: unset; 
  /* then set own attributes */
  color: red;
}

В качестве альтернативы:
если возможно, рекомендуется инкапсулировать класс или идентификатор в своего рода пространство имен:

.namespace .customClass{
  color: red;
}

<div class="namespace">
  <div class="customClass"></div>
</div>

из-за специфики селектора это повлияет только на ваши собственные классы

Это проще сделать на "языках сценариев препроцессора", таких как SASS, с возможностью вложения:

.namespace{
  .customClass{
    color: red
  }
}
Источник

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

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

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

Источник

Вы можете использовать эту опцию ниже.

<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>
Источник

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

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

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

Источник

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

area { background-color : red; }
Источник

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

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

Источник
Другие вопросы по тегам