重置列表 sass/css

Question

我正在尝试通过 class 将 ul 和 li 重置为其默认行为，但我遇到了麻烦。我试过使用 inherit 和 initial 但那不起作用。

这是我目前的情况：

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

所以我想要一个 class 在这种情况下称为 .list-unset 将子 DOM 设置为浏览器默认值而不是 margin: 0 和 padding: 0.

我试过：

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

但这没有用。

Answer 1

重置 <ul> 元素的 'correct' 方法是使用 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> 样式应用到目标元素，确保应用更高的 specificity:

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>

Reset list sass/css