如何防止继承特定 Div 内的 CSS 样式？

将 div 与公共 CSS 样式隔离

问题：

在提供的 HTML 代码中，CSS 样式应用于img 和 h1 元素也会影响 #mydiv div 中的元素。如何防止这种继承？

解决方案：

使用 all 速记属性：

CSS Level 3 引入了all 简写属性，允许您重置元素的所有属性。通过在 #mydiv div 上设置 all: 初始值，从其祖先继承的所有样式都将被阻止。

要允许在 #mydiv div 中设置样式，请将 all: unset 应用于其后代。这将启用 div 内的继承，同时防止外部 CSS 影响它。

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

手动设置各个属性：

为了更广泛的浏览器支持，请手动设置所有已知的属性#mydiv div 的 CSS 属性为初始值，并为其后代继承或初始值（如果适用）。这会模拟 all 属性的行为。

其他注意事项：

• 考虑在 div 上使用类而不是 ID，以实现更好的特异性控制。
• 阻止潜在伪元素后代的样式，以确保完全隔离。
• 监视浏览器对 all 速记属性的支持，因为它尚未得到普遍支持。

以上是如何防止继承特定 Div 内的 CSS 样式？的详细内容。更多信息请关注PHP中文网其他相关文章！