如何将 Div 与全局 CSS 影响隔离：使用“all:initial”和“all:unset”

如何隔离 Div 免受全局 CSS 影响

在提供的 HTML 代码中，我们有一个 ID 为“mydiv”的 div 元素嵌套在正文中。当将 CSS 样式应用于图像和标题等元素时，我们可能希望从这些公共样式中排除“mydiv”内的元素。

CSS 级联和继承控制

CSS 级联和继承级别3 引入了 all 简写属性和 unset 关键字，使我们能够限制继承并隔离特定元素。通过在元素上设置 all:initial，我们可以有效地阻止所有继承并将所有属性重置为其初始值。这类似于从头开始，忽略从父元素继承的任何样式。

使用 all:initial 隔离“mydiv”

为了防止继承的样式影响“mydiv”中的元素，我们将 all: initial 应用于 div，并将 all: unset 应用于其后代：

<code class="css">#mydiv {
  all: initial; /* Blocks inheritance for all properties */
}

#mydiv * {
  all: unset; /* Allows inheritance within #mydiv */
}</code>

全面属性重置

或者，以确保为了兼容各种浏览器，我们可以手动将所有已知的 CSS 属性（包括供应商前缀的版本）设置为其初始值：

<code class="css">#mydiv {
  /*
   * Using initial for all properties
   * to completely block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * Using inherit for normally heritable properties,
   * and initial for the others, similar to unset
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}</code>

通过利用这些技术，我们可以成功防止“mydiv”中的元素继承并受到全局 CSS 样式的影响，从而将它们隔离在自己封装的样式环境中。

以上是如何将 Div 与全局 CSS 影响隔离：使用“all:initial”和“all:unset”的详细内容。更多信息请关注PHP中文网其他相关文章！