如何从公共CSS样式中隔离div？

CSS层叠和继承级别3介绍了

all

unset

例如，如果作者

all: initial

在元素上指定，它将阻止所有继承并重置所有属性，就像级联的作者，用户或用户代理级别中没有规则一样。

这对于不希望继承外部页面样式的页面中包含的“窗口小部件”的根元素很有用。但是请注意，应用于该元素的任何“默认”样式（例如，

display:block

来自UA样式表上的块元素，例如

<div>

）也将被吹走。

您需要将其应用于

all: initial

all: unset

#mydiv {  all: initial; }#mydiv * {  all: unset; }

您可能要在div上使用一个类而不是一个id，这样，您编写的用于为其后代设置样式的任何规则都不必匹配或超过此规则中使用的高特异性。

为了真正安全起见，您可能也希望在潜在的伪元素后代中阻止样式：

#mydiv::before,#mydiv::after,#mydiv *::before,#mydiv *::after {  all: unset;}

另外，为了获得更广泛的浏览器支持，您可以

all

#mydiv {    align-content: initial;  align-items: initial;  align-self: initial;  alignment-baseline: initial;  animation: initial;  backface-visibility: initial;  background: initial;  ...}#mydiv::before,#mydiv::after,#mydiv *,#mydiv *::before,#mydiv *::after {    align-content: initial;  align-items: initial;  align-self: initial;  ...  color: inherit;  ...}