Ответ 1

спецификация CSS Cascading и Inheritance Level 3 предоставляет возможность reset всем свойствам сразу. Это достигается с помощью сокращенного свойства all со значением initial или unset в зависимости от того, нужно ли вам reset унаследованные свойства.

Обратите внимание, что они не имеют никакого отношения к значениям по умолчанию для браузеров.

Эта функция доступна в Firefox 27+, Chrome 37+ и Opera 24 +.

Пока эта функция не будет широко реализована, вы можете использовать классы "пространства имен". Например, чтобы отделить стили компоновки от стилей содержимого, класс типа content может использоваться как пространство имен для всех стилей содержимого.

Упрощенный пример:

/* Global styles for UL lists. */
UL {list-style: none; margin: 0; padding: 0; }

/* Styles for UL lists inside content block. */
.content UL {list-style: disc; margin: 1em 0 1em 35px; }

Ответ 2

Это проблема, которая решается лучше всего, избегая ее с самого начала. Я стараюсь сохранить контекстные (или потоковые) селектор до минимума, и я избегаю использовать имена тегов в качестве селекторов. Вместо этого я использую классы, чтобы мои элементы html (<a>, <p>, <ul>, <span> и т.д.) Всегда выглядели так, как будто они не были разработаны независимо от того, какой элемент/его родительский элемент.

В вашем случае, я думаю, вы можете только перезаписать наследуемые стили, как вы упомянули, с атрибутом inline-style или с помощью !important или даже лучше, создайте класс .reset:

.reset { with: auto; height: auto; padding: 0; /* etc */ }

Все упомянутые выше решения имеют свои недостатки, поэтому вам нужно выбрать битву.

Ответ 3

Вы можете попробовать http://cleanslatecss.com/ полностью reset целевой элемент, это только css, no js, ​​вам просто нужно добавить класс для цели, и все это сделано.

Проблема, которую я нашел в других ответах, заключается в том, что никто не использовал !important, поэтому может случиться, что reset не может быть применен к элементу, все решено с помощью cleanslate, который сделает это для вас.

Ответ 4

Тень DOM

Функция Теневой DOM v1 в настоящее время (постоянно подлежит изменению) имеет растущую поддержку, предлагая множество возможности, включая CSS с CSS.

Тень DOM v0 была реализована в Chrome/Opera, но другие производители браузеров реализуют v1.
Состояние MS Edge: В рамках обсуждения
Статус Firefox: в разработке

От Google Developers: Shadow DOM v1: самосохраняемые веб-компоненты:

Сбрасывает самую полезную функцию теневого DOM с областью CSS:

• Селекторы CSS с внешней страницы не применяются внутри вашего компонента.
• Стили, определенные внутри, не выходят из строя. Они привязаны к элементу узла.

Селекторы CSS, используемые внутри теневого DOM, применяются локально к вашему компоненту. На практике это означает, что мы снова можем использовать общие имена id/class, не беспокоясь о конфликтах в другом месте на странице. Более простые селектора CSS - лучшая практика внутри Shadow DOM. Они также хороши для производительности.

Ниже attachShadow в новый createElement( "div" ), к которому мы применим style.all = "unset", чтобы лишить all правил, применяемых к остальной части document div s.

Затем мы заполняем наш shadow-root любым содержимым, которое нам нравится, и предоставляем любые желаемые стили, прежде чем appendChild( "new_div" ) внедряет наш контент в body.

В результате получается стилистически изолированное содержимое.

const new_style = document.createElement( "style" ),
      new_div = document.createElement( "div" ),
      new_list = document.createElement( "ul" ),
      new_entries = [ "Lorem", "Ipsum", "Dolor" ],
      shadow = new_div.attachShadow( { mode: "open" } );
new_style.textContent = "ul { list-style: none; }";
new_div.style.all = "unset";
new_entries.forEach( ( v ) => {
  var li = document.createElement( "li" );
  li.textContent = v;
  new_list.appendChild( li );
} );
shadow.appendChild( new_style );
shadow.appendChild( new_list );
document.body.appendChild( new_div );

body {
  background: antiquewhite;
}
ul {
  margin: 2em;
  border: 2px gray solid;
  border-right: 0;
  border-left: 0;
  background: cornflowerblue;
}
li {
  margin: inherit;
  font-family: "Comic Sans MS";
}

<body>
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    <li>Qux</li>
  </ul>
</body>