Как изолировать div от общедоступных стилей CSS?

у меня есть код, например, здесь, в HTML

<code><html>
 <body>
  <img src='an image source'/>
  <h1>Hi it's test</h1>
  <div id='mydiv'>
    <img src='an image source'/>
    <h1>Hi it's test</h1>
  </div>
 </body>
</html>
</code>

если бы я использовал следующий CSS-код для его оформления:

<code>img{
   width:100px;
   height:100px;
}
h1{
   font-size:26px;
   color:red;
}
</code>

вопрос заключается в следующем: как можно предотвратить и изолировать теги внутри тега div mydiv от стилизации с помощью стиля общедоступных тегов?

Ответы на вопрос(4)

Решение Вопроса

CSS Каскадирование и Наследование Уровень 3 вводитall shorthand property а такжеunset keyword, что, в совокупности, позволит вам этого добиться удобно.

For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.

This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.

Вам нужно подать заявкуall: initial к вашему div иall: unset его потомкам:

#mydiv {
  all: initial; /* blocking inheritance for all properties */
}
#mydiv * {
  all: unset; /* allowing inheritance within #mydiv */
}

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

Чтобы быть действительно безопасным, вы можете заблокировать стили и для потенциальных потомков псевдоэлементов:

#mydiv::before,
#mydiv::after,
#mydiv *::before,
#mydiv *::after {
  all: unset;
}

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

#mydiv {
  /*
   * using initial for all properties
   * to totally block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  alignment-baseline: initial;
  animation: initial;
  backface-visibility: initial;
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * using inherit for normally heritable properties,
   * and initial for the others, as unset does
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}

Вы можете поощрить поддержку браузера дляall Сокращенное свойство и проследите его принятие с этими ссылками выпуска:

Chrome 37+ ☑ Firefox 27+ ☑ Webkit (Safari 9.1+) ☐ Internet ExplorerEdge ☑ Opera 24+

Актуальная информация о поддержке браузера дляall сокращенное свойство доступноВот.

 02 мар. 2017 г., 15:58
Здорово. Нет обходного пути для IE / Edge?
 07 окт. 2017 г., 20:06
Обратите внимание, что кажется, что с этой техникой псевдо-классы, такие как:hover не сбрасываются Вы не можете предотвратить подобные вещи, влияющие на ваш компонент:button:hover { background-color: gray; }
 09 окт. 2017 г., 02:48
@ Zardo, см. Абзац, начинающийся с & quot; Альтернативно, для более широкой поддержки браузера ... & quot ;. Эта техника работает в IE / Edge.
 05 авг. 2018 г., 20:15
Еще одна вещь, которую стоит отметить, что если есть!important где-нибудь в родительской иерархии,all собственность не поможет.
 09 окт. 2017 г., 02:46
@ ThomasL 'huillier Неправильно: правило с селектором#mydiv * бьет (имеет более высокую специфичность), чемbutton:hover править. Если вы этого не видите, то вы, вероятно, используете селекторы с более низкой специфичностью для правил блокировки, чем рекомендовано выше (возможно,.mydiv * вместо#mydiv *?). Если использование селектора идентификаторов не является приемлемым вариантом для вас, вы можете повторять селектор классов столько раз, сколько может потребоваться для достижения непревзойденной специфичности для вашей страницы:.mydiv.mydiv.mydiv.mydiv *, Надеюсь это поможет.

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

Мало что можно попробоватьdon't style with tag name instead give class name и дать объявление стиля классу. так что вы можете быть уверены, куда пойдут все стили.

ИЛИ ЖЕ. если вы хотите, чтобы какой-то определенный тег Div не имел стиля, в то время как другие Div имели бы. вы всегда можете сбросить его, дать другое имя класса или идентификатор и сбросить объявления стиля

Одна вещь, которая может быть полезна, этоCSS direct child selector, который доступен во всех браузерах, включая IE7 +. Это позволяет применять стили, которые не касаются детей. Например, в вашем коде вы можете использовать этот CSS:

body > img {
  width:100px;
  height:100px;
}
body > h1 {
  font-size:26px;
  color:red;
}

И этот CSS будет применяться только к элементам непосредственно в элементе BODY.

Старый вопрос, но с момента принятого ответа все немного изменилось. Теперь есть рекомендованное CSSWG ключевое словоrevert который был бы лучше подходит, чемinitial а такжеunset решить эту проблему, поскольку он сбрасывает свойство элемента к значению, определенному втаблица стилей агента пользователя а не начальное значение свойства независимо от того, на каком элементе оно используется. Так, например,div внутри#mydiv будет отображаться наblock как и следовало ожидать, а неinline.

Вы должны сделать это:

#mydiv,
#mydiv::before,
#mydiv::after,
#mydiv *
#mydiv *::before,
#mydiv *::after {
  all: revert;
}

К несчастью,revert is not supported by any browser кроме Safari (для Mac и iOS) на момент написания.

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

Поэтому вам нужно сделать что-то подобное (обратите внимание на#mydiv которые повышаютспецифичность из правил):

#mydiv p {
  margin-top: 20px;
}

#mydiv .bg-black {
  background-color: black;
}

// etc.
 03 мар. 2019 г., 22:20
Это будет лучшее решение, когда оно будет доступно.Firefox теперь рассматривается черновой патч. Вы можете проголосовать за функцию.

Ваш ответ на вопрос