如何将 div 与 HTML 中的公共 CSS 样式隔离？

将 div 与公共 CSS 样式隔离

在 HTML 中，CSS 级联和继承有时会影响 div 中无意的元素由公共 CSS 规则设计样式。这可能会导致意外的格式问题。为了解决这个问题，CSS 级联和继承级别 3 引入了 all 简写属性和 unset 关键字。

使用 all 和 unset 关键字

防止 div 内的标签为了避免受公共样式的影响，您可以在 div 上设置 all: initial ，并在其后代上设置 all: unset 。这将阻止 div 上所有属性的继承，并允许在 div 本身内继承。

示例

考虑以下 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，div内的图像和标题将继承公共样式。要隔离它，请应用以下 CSS：

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

这将阻止任何公共样式影响 #mydiv div 中的元素，同时允许它们继承 div 本身中定义的样式。

跨浏览器支持

大多数现代浏览器都支持 all 属性。对于较旧的浏览器，您可以手动为所有 CSS 属性指定初始值以获得类似的结果。但请注意，此方法不如使用 all 属性有效。

以上是如何将 div 与 HTML 中的公共 CSS 样式隔离？的详细内容。更多信息请关注PHP中文网其他相关文章！