如何防止影响网站其他内容的CSS？

Question

在我的网页中，我需要获取电子邮件并显示其内容。这已经成功完成，但唯一的问题是，当电子邮件的内容加载到我的页面上时，该邮件的CSS会影响到我的页面，并更改链接的颜色等等。

我编写了以下代码：

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

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

- Uday A. Navapara

---

@HashemQolami 行内样式会如何影响页面中的其他元素？ - T J

@TJ 在 specificity 方面，内联样式比 #id、.class 和 element 选择器具有更高的特异性值。因此，它将覆盖样式表中定义的声明，但仅适用于它们所附加的特定部分，而不是整个页面。 - Hashem Qolami

@HashemQolami 那么，据我所知，问题在于加载的内容中的样式会影响站点的其他部分……就我所知，内联样式只会影响应用它的元素。 - T J

@UdayA.Navapara 我能想到的唯一解决方案是在一个<iframe>中加载内容... - T J

我已经尝试过加载<iframe>成功，但内容没有加载。 - Uday A. Navapara

Answer 1

尝试像这样更改它： 例如，如果您有以下代码：

.yourclass{

}

将其更改为特定条件：

.parent_element .yourclass
  {

  }

或者尝试使用!important

- Bouraoui KACEM

---

这并没有解决防止嵌入消息中的样式标签泄露出去的问题。 - dehrg

Answer 2

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

例如，如果您只想将样式应用于您显示的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后端使用类似的方法。

- dehrg

Answer 3

不，你不能禁用特定的div的CSS。

如果您的div选择器匹配，则一个规则将适用，直到被进一步覆盖掉设置了相同属性的规则。您可以使用！important来覆盖规则。

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

更新

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

- Manwal

---

没有类或ID的问题，它是CSS直接影响元素。 - Uday A. Navapara

哪个元素？@UdayA.Navapara。<div>？ - Manwal

你能告诉我如何将内容放入iframe吗？我认为iframe是通过src加载其他页面的。 - Uday A. Navapara

您可以将电子邮件内容放置在另一页中，然后只需将该页面的URL提供给iframe即可。 - Manwal

在我的情况下，这是不可能的，因为数据来自数据库并且被放置在循环中。 - Uday A. Navapara

Answer 4

在你的代码中不要使用常规的类名，例如不要使用header、footer或content等名称，你可以将所有的类名与你的网站名称连接起来，以确保不会混淆类。

- Bouraoui KACEM