为特定div中的所有元素禁用CSS样式?

Question

我的脚本生成一个用户的电子邮件签名，然后在弹出模式中显示它。我所遇到的问题是，modal-bodydiv也受到视图的CSS样式，这与签名的外观和感觉混乱，因此我想禁用CSS以获得无样式的签名。

是否有可能在modal-bodydiv (p, br, a href等)中禁用所有元素的CSS样式，以及如何最好地做到这一点?

感谢

Answer 1

有各种CSS重置值，你可以使用all属性来设置几乎每个属性的值。

.modal-body {
all: initial | unset | revert
}

• initial值为属性默认值
• 默认属性或继承属性的unset值
• revert为该元素的默认值(浏览器样式)，我认为这里唯一的区别是，显示将是块而不是内联的div元素。

上面的例子只会设置.modal-body本身的样式，如果你想重置其中每个元素的值，你可以这样做:

.modal-body,
.modal-body * {
all: initial | unset | revert
}

这不仅针对.modal-body，而且针对.modal-body的每个后代。要小心使用unset以外的值，因为它非常强大，强大的功能意味着更大的责任。

如果您仍然有问题，您的其他样式可能更具体，因此覆盖此规则。你可以尝试添加!important，但这将需要在你的模态元素的每个重新样式上使用它。在这种情况下，我建议给你的模式一个ID，并使用它来设置样式，并通过梳理你的其他CSS来删除ID选择器，使专一化。

我不确定我完全理解你的评论…如果这不是你想要的HTML，请更新你的问题以包含你的HTML，我会更新这个答案:

<div id="modalSignaturePreview">
<div class="modal-body"></div>
</div>

无论如何，对于上面的HTML，你可以在CSS中使用#modalSignaturePreview .modal-body来定位它，这里我们针对的是所有具有modalSignaturePreview (ID为modalSignaturePreview)元素的后代类的modalbody元素。

Answer 2

听起来你想要all的css属性。

.modal-body * {
all: initial;
}

例子

应该返回到用CSS修改之前的所有内容。.modal-body *的专一性只有0 1 0，所以你可能需要让这个选择器更专一，或者添加!important。