重置 sass/css 列表

Question

我试图通过类将 ul 和 li 重置为其默认行为，但我遇到了麻烦。我尝试过使用inheritandinitial但这不起作用。这是我到目前为止所拥有的：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>