为什么"all: initial"使<style>标记可见？如何在 css 中将所有内容重置为初始状态？

Question

我正在制作一个插件，可以在任何页面上动态生成容器。

因为可能有一些预定义的规则会改变我.my-plugin内内容的外观，所以我设置

.my-plugin * {
all: inital;
}

到里面的<style>标签。

但不知何故，它使<style>标签可见：

/* The style that from the page, which is uncertain */
h1 {
color: red;
}

<h1>This is red</h1>
<!-- dynamically injected code -->
<div class="my-plugin">
<style>
.my-plugin * {
/* reset everything to default state */
all: initial;
}

.my-plugin {
border: solid 1px black;
}
</style>

<h1>This is not red</h1>
</div>

如何将标签内的所有内容设置回其初始状态？

我知道我可以做一些类似.my-plugin style { display: none; }的事情，但是其他不应该不可见的标签呢？

归根结底，我只是不希望.my-plugin里面的h1是红色的。

有没有更好的方法？

Answer 1

显示initial对所有元素inline，显然包括style元素。这将覆盖用户代理样式表应用的display:none样式。

要获得开始应用作者样式之前的样式，您真正想要的是{ all: revert; }但浏览器兼容性还不好。