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

乐正烨熠

2023-03-14

问题内容：

我在HTML中有一些代码例如

<html>
 <body>
  <img src='an image source'/>
  <h1>Hi it's test</h1>
  <div id='mydiv'>
    <img src='an image source'/>
    <h1>Hi it's test</h1>
  </div>
 </body>
</html>

如果我使用以下CSS代码进行样式设置：

img{
   width:100px;
   height:100px;
}
h1{
   font-size:26px;
   color:red;
}

问题是：如何防止和隔离mydiv div标签内的标签，使其免受公共标签样式的影响？

问题答案：

CSS层叠和继承级别3介绍了all速记属性和该unset关键字，这一起，让您方便地实现这一目标。

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

这对于不希望继承外部页面样式的页面中包含的“窗口小部件”的根元素很有用。但是请注意，应用于该元素的任何“默认”样式（例如，display: block来自UA样式表上的块元素，例如<div>）也将被吹走。

您需要将其应用于all: initialdiv all: unset及其后代：

#mydiv {
  all: initial; /* blocking inheritance for all properties */
}
#mydiv * {
  all: unset; /* allowing inheritance within #mydiv */
}

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

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

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

另外，为了获得更广泛的浏览器支持，您可以all通过设置所有已知的CSS属性来手动尝试执行操作（不要忘记带前缀的版本）：

#mydiv {
  /*
   * using initial for all properties
   * to totally block inheritance
   */
  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 {
  /*
   * using inherit for normally heritable properties,
   * and initial for the others, as unset does
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}

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

相关阅读

相关文章

相关问答

相关工具

相关文档