html - 使用所有 : unset; doesn't overwrite external styles

Question

我按此顺序在页面上加载两个样式表:

plugin.css
styles.css

两个样式表都从我的服务器加载。

通过plugin.css ，有以下类:

.plugin h1 {
  font-size: 1.7em;
  line-height: 1;
  margin: 0;
  padding: 0;
}

通过styles.css , 我已经有 <h1>样式，像这样:

h1 {
  font-size: 42px;
  font-size: 2.625rem;
  line-height: 1;
  margin-bottom: 0.3333333333333333em;
}

覆盖plugin.css ，我通常会在 styles.css 内执行此操作:

.plugin h1 {
  font-size: 42px;
  font-size: 2.625rem;
  line-height: 1;
  margin-bottom: 0.3333333333333333em;
}

这根本没有效率，因为我在重复已有的代码。我希望在 styles.css 中使用以下内容:

.plugin h1 {
  all: unset;
}

或者

.plugin h1 {
  all: initial;
}

我期待 all: unset;或 all: initial;清除 .plugin h1 中的属性并恢复到我的默认值 <h1> styles.css 中的样式, 但它不起作用。

我是不是误解了它的工作原理，还是我遗漏了什么？

Answer 1

如果您使用 all: initial; 或 all: unset; 它将删除所有样式，甚至使您的 h1 标签成为 内联元素。因此，以这种方式重置实际上会增加您的头痛!如果您真的想unset 以前的属性，那么尝试unset 或initial 像这样的单个属性。

.plugin h1 {
      font-size: unset;
      line-height: unset;
      margin-bottom: unset;
     }

.plugin h1 {
     font-size: 42px;
     font-size: 2.625rem;
     line-height: 1;
     margin-bottom: 0.3333333333333333em;
    }

unset 代码后，您可以像这样使用您想要的样式。 但我不确定您为什么两次得到 font-size:!你知道最后一个只会起作用!