Сбросить список sass / css

Question

Я пытаюсь сбросить ul и li к его поведению по умолчанию через класс, но у меня проблемы с этим. Я пытался использовать inherit и initial, но это не работает.

Вот что у меня есть:

ul, li {
    margin: 0;
    padding: 0;
}

И поэтому я хочу, чтобы у меня был класс в этом регистр с именем .list-unset, который установит для дочернего DOM настройки браузера по умолчанию и не будет принимать margin: 0 и padding: 0.

Я пытался:

.list-unset {
    ul, li {
        margin: unset;
        padding: unset;
    }
}

, но это не так работа.

Answer 1

«Правильный» способ сброса элемента <ul> заключается в inherit:

ul, li {
  margin: 0;
  padding: 0;
}

ul.unset, ul.unset > li {
  margin: inherit;
  padding: inherit;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="unset">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Однако имейте в виду, что это значение наследуется от его родительского элемента . Какие бы правила ни применялись к родителю (если таковые имеются) будут применяться к цели. Если никакие правила не установлены, он будет установлен по умолчанию, как указано выше.

В противном случае вы можете вручную применить стили <ul> по умолчанию к целевому элементу, гарантируя, что вы применяете более высокую специфичность :

ul, li {
  margin: 0;
  padding: 0;
}

ul.unset {
  margin-left: 16px;
  margin-top: 1em;
  margin-bottom: 1em;
}

ul.unset > li {
  margin: 1px 0;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="unset">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>