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

Question

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

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

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

Answer 1

否您不能禁用特定div的css。

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

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

更新

我认为你应该在Iframe中加载电子邮件的内容。这样邮件的css不会影响网页的其他内容。

Answer 2

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

.yourclass{

}

将其更改为特定条件：

.parent_element .yourclass
  {
  }

或者尝试使用！重要

Answer 3

不要在代码中使用类的常规名称。例如，不要使用页眉-页脚内容，你可以将所有类名与网站名称连接起来，以确保不会混淆类

Answer 4

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

即。如果您只希望样式应用于所显示的div，那么.someclass td应该变成.ticket-reply-content .someclass td。

您应该能够使用regex:/(.*{)/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中找到style元素，并使用java后端中的类似方法