如何将'div”容器与公共 CSS 样式隔离并防止其子级继承全局样式？

Linda Hamilton

发布： 2024-10-26 04:19:03

原创

394 人浏览过

How can you isolate a `div` container from public CSS styles and prevent its children from inheriting global styles?

将 Div 与公共 CSS 样式隔离

问题

考虑以下 HTML 代码：

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

登录后复制

应用以下内容CSS 样式表：

<code class="css">img {
  width: 100px;
  height: 100px;
}
h1 {
  font-size: 26px;
  color: red;
}</code>

登录后复制

问题出现了：我们如何防止为所有如何将'div”容器与公共 CSS 样式隔离并防止其子级继承全局样式？定义的样式？和

标签会影响 #mydiv 容器中的元素吗？

解决方案

要将 #mydiv 中的元素与全局 CSS 样式隔离，我们可以利用 all 简写属性和中引入的 unset 关键字CSS 级联和继承级别 3。

通过在 #mydiv 上设置 all:initial，我们阻止所有属性的继承并将其重置为默认值。这可以防止全局样式级联到容器中。

为了允许在 #mydiv 内继承，我们可以在其后代上设置 all: unset。通过这样做，我们可以使容器内定义的规则生效，而不受外部样式的干扰。

这是修改后的CSS代码：

<code class="css">#mydiv {
  all: initial;
}
#mydiv * {
  all: unset;
}</code>

登录后复制

需要注意的是，这种技术适用于所有可能的 CSS 属性，包括供应商前缀的属性。为了确保广泛的浏览器支持，建议也以伪元素为目标：

<code class="css">#mydiv::before,
#mydiv::after,
#mydiv *::before,
#mydiv *::after {
  all: unset;
}</code>

登录后复制

替代方法

或者，为了更广泛的浏览器兼容性，您可以手动将每个 CSS 属性设置为其初始值#mydiv 上的值并继承其后代，如以下代码所示：

<code class="css">#mydiv {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}</code>

登录后复制