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

【问题标题】：How stop affecting the CSS of other content to our site?如何停止影响我们网站的其他内容的 CSS？
【发布时间】：2014-11-04 01:53:55
【问题描述】：

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

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

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

【问题讨论】：

如果加载的元素具有内联样式，您可以通过 JavaScript 删除它们的 style 属性/值，或者使用 !important 关键字覆盖样式表中的规则集。
该邮件的 CSS - 电子邮件是否在 <style> 标记中包含 css？？
@HashemQolami 内联样式将如何影响页面中的其他元素？
@TJ 在specificity 方面，内联样式比#id、.class、element 选择器具有更高的特异性值。因此，它将覆盖样式表中定义的声明，而不是针对整个页面，而是针对附加的特定部分。
@HashemQolami 所以？据我了解，问题是加载内容中的样式会影响网站的其他部分......据我所知，内联样式只会影响它所应用的元素。

标签： java jquery css html

【解决方案1】：

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

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

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

更新

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

【讨论】：

class 或 id 没有问题，它的 css 直接影响到元素
哪个元素？ @UdayA.Navapara。 <div>??
你能说把内容放到 iframe 里很热吗？我认为 iframe 用于通过 src 加载其他页面
您可以将电子邮件内容放在另一个页面中，只需将该页面的 url 提供给 iframe
在我的情况下这是不可能的，因为数据来自数据库并且它被放入循环中

【解决方案2】：

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

.yourclass{

}

将其更改为特定条件：

.parent_element .yourclass
  {

  }

或尝试使用 !important

【讨论】：

这并不能解决防止消息中嵌入的style标签泄露的问题

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

即。 .someclass td 应该变成 .ticket-reply-content .someclass td 如果您只想将样式应用于您显示的 div。

您应该能够使用正则表达式：/(.*{)/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 后端使用类似的方法

【讨论】：