Question

这可能是一个奇怪的问题，但我正在尝试创建一个div，它将作为HTML邮件消息的一种预览窗格，我希望确保所有样式都是内联的。因此，我希望div和它的内容不会从外部页面接收样式。

有没有办法（在CSS或Javascript中）或者我必须覆盖之前设置的每个样式？

我会展示一些代码，但这有点打破我想要的问题。例如，假设我有一个div：

<div id="somediv">
    <h2>Message Header</h2>
    <p>This is some content</p>
</div>

由于此div是较大页面的一部分，因此它及其内容受周围页面和所包含的任何CSS文件的样式（如边距，填充，字体，字体大小，颜色等）的影响。有没有办法否定所有样式而不是单独覆盖它们？

Answer 1

我猜你最接近的是对给定容器中的所有内容做一些CSS reset，然后可能尝试重新添加一些类似默认值的边距，直到它再次看起来“没有样式”。然后使用内联CSS从那里开始。

另一种完全不同的方法可能是在iframe中显示邮件，其中根本没有应用样式。可能可以完成，但可能是一个更复杂的实现。

Answer 2

将来，您使用all: unset declaration重置所有属性，但它仅适用于Firefox 27 +。

目前，您可以将“内部”内容放在单独的文档中并通过iframe嵌入：

<iframe src="content.html"></iframe>

content.html（最低有效HTML5文档）：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Content</title>
  </head>
  <body>
    <h2>Message Header</h2>
    <p>This is some content</p>
  </body>
</html>

Answer 3

如果要重写继承的CSS而不使用browser-default-CSS，可以在每个属性后面添加!important。例如：

#noInherit {
    background-color: #fff !important;
}

我不确定你是否可以停止继承。也许其他人可以给你一个更好的答案。

Answer 4

我不相信你可以删除所有样式，因为在css中没有null这样的东西。你可以把所有东西都自动化一个大转储

.noStyle{
    width: auto;
    height: auto;
    etc...
}

但我认为这不会得到你所追求的效果，因为它只会让div从它的父母那里继承一切。关于你想要完成什么的更多细节可能会更容易帮助你找到一个可行的解决方案，但我不认为目前提出的问题是“可解决的”。

Answer 5

您可以使用否定选择器。只需添加：不要在任何CSS规则之前，您不想在该div上应用。

http://www.w3.org/TR/css3-selectors/#negation

如果你手动完成，你会很努力，但如果你愿意，你可以自动化它。请注意，它仅适用于现代浏览器。

另一种方法是使用iframe。不推荐。

清除div及其任何CSS样式的内容

5 个答案: