Question

我正在为网络邮件构建一个界面：我收到邮件的内容，我把它放在＆lt; div＆gt; 元素中，在那里显示邮件。＆＃xA;问题是每个邮件都有＆lt; style＆gt; 标签以及用于设置邮件样式的规则，但是有些规则甚至可能对我的html代码有效，即div的外部显示消息。

＆＃xA;＆＃xA;

例如

＆＃xA;＆＃xA;

 ＆lt; body＆gt;＆＃xA;＆lt; h1＆gt;收件箱＆lt; / h1＆gt;＆＃xA;＆lt; div class =“message”＆gt; {此处我将邮件html}＆lt; / div＆gt; ＆＃xA;＆lt; / body＆gt;＆＃xA;

＆＃xA;＆＃xA;

消息html包含以下内容：

＆＃xA;＆＃xA;

 ＆lt; style＆gt;＆＃xA; body {background：red}＆＃xA;＆lt; / style＆gt;＆＃xA;

＆＃xA;＆＃xA; < p>因此，当我的页面呈现时，它具有红色背景。＆＃xA;我希望＆lt; div class =“message”＆gt; 中声明的属性仅在此处呈现。

＆＃XA;

Answer 1

您可以使用iframe srcdoc属性，例如

<iframe srcdoc="&lt;style&gt;body { background: red}&lt;/style&gt;"></iframe>

整个电子邮件内容必须放在srcdoc中，并正确转义。

您可以详细了解here。

Answer 2

您可以通过更改CSS规则来执行此操作：

<style>
body { background: red}
</style>

要：

<style>
.message { background: red}
</style>

并且必须仅使用<div> message .message内的每个CSS规则加上@login_required def create_lab_device(request, owner): if request.method == 'POST': add_device_form = AddNewDeviceForm(request.POST) context_dict={} if response.is_ajax(): add_device_form.is_valid(): # do the stuff to save to database context_dict['success']=True else: # form not valid, return false with the rendered form context_dict['success']=False return JsonResponse(context_dict)选择器前缀。

Answer 3

Scoped CSS就是您所需要的。

<div>
  <style scoped>
    h1 { color: FireBrick;   }
    p  { color: SaddleBrown; }
  </style>
  <h1>This is an H1 in a scoped div. Regardless of global styles the text should be "FireBrick".</h1>
  <p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>

现在，这些样式仅适用于div中的h1和p。

Answer 4

你好（几乎）好运，有一个功能就是这样！ Scoped Styles是HTML5规范的一部分，它非常适合您的问题。问题（因此几乎）是very poor native support。

解决方案显示在this article中，它使用jQuery based polyfill。

简而言之，在支持该标准的情况下，您可以将scoped关键字添加到样式标记中，并且您已完成（目前只能在Firefox中使用）：

＆＃13;

<div>
  <style scoped>
    span {
      color: red;
    }
  </style>
  <span>What color am I?</span>
</div>
<span>And what color am I?</span>

＆＃13;

如何在html中沙盒化<style>声明？

4 个答案: