全部使用：未设置;不会覆盖外部样式

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中清除属性并恢复为styles.css中我的默认<h1>样式，但它不起作用。

我是否误解了它的工作原理，或者我错过了什么？

Answer 1

如果您使用 all: initial; 或 all: unset;它将删除所有样式，甚至使您的h1标签成为inline element。所以重置这种方式实际上会增加你的头痛！如果您确实想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:两次！你知道最后一个只会起作用！