Question

在我的网页中，我需要提取电子邮件并显示电子邮件的内容。它已经完全成功了，现在只有一个问题是，当我的页面中加载电子邮件的内容时，该邮件的CSS会影响我的页面并改变链接的颜色等等。我写了以下代码

<div class="ticket-reply-content"> <!-- division to print the messages -->
    ${replies.message_modify}<!--this will load content dynamically -->
</div>

请给我一些解决方案或标签。

Answer 1

尝试改变它：例如，如果你有这样的代码：

.yourclass{

}

将其更改为特定条件：

.parent_element .yourclass
  {

  }

或尝试使用！important

Answer 2

否您无法禁用特定div的css。

如果您的div选择器匹配，则规则将适用，直到规则（设置相同的属性）被级联进一步向下覆盖。您可以使用!important覆盖规则。

您可以更改div的类或ID，以阻止它们与您不希望匹配的元素匹配，也可以覆盖该部分中的所有规则。

更新

我相信您应该在Iframe中加载电子邮件的内容。这样邮件的CSS不会影响网页的其他内容。

Answer 3

请勿在代码中使用常规的课程名称，例如，不要使用页眉页脚内容，您可以将所有课程名称与您网站的名称相关联，以确保不会有混乱的课程

Answer 4

您可以使用正则表达式并将嵌入式样式标记中的每个选择器本地化到您希望应用样式的区域。

即。如果您只希望将样式应用于您展示的div，则.someclass td应该变为.ticket-reply-content .someclass td。

你应该可以使用正则表达式：/(.*{)/g匹配任何选择器和它的声明的开始括号。

在Javascript中，您必须在将元素加载到页面后执行此操作：

$(function() {
    // select each of the style elements
    $('.ticket-reply-content style').each(function(styleElement) {
        // get the css styles from the element
        var oldStyles = styleElement.html();
        // prepend each selector with a class to localize it
        var newStyles = oldStyles.replace(/(.*{)/g, function(match, p1) {
            return '.ticket-reply-content ' + p1;
        });
        // replace the css content
        styleElement.html(newStyles);
    }); 
});

你应该能够找到replies.message_modify里面的样式元素，并使用java后端的类似方法

如何停止影响我们网站的其他内容的CSS？

4 个答案:

更新