内部运行时css干扰页面默认css

Question

我需要在angularjs代码中绑定html。

<div class="preview-container" slimscroll="{height: '', color: '#00AAFF', alwaysVisible: 'true'}">
<div ng-bind-html='previewHtml' class="preview-container"></div>
</div>

previewHtml的值是从包含其自己的css样式的服务器中检索的。previewHtml的内部css正在主机页的默认css中引起干扰。

从服务器中检索到的用于预览Html的内容将如下所示。

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
<style type="text/css">
...some value 
</style>
<table > 
...some value  
</table>
</div>

有什么方法可以避免内部/运行时css 引起的这种干扰吗

Answer 1

确保这一点的最佳方法是使用内联样式，它比<style>标记中的样式更具体。

<div style="your_preview_style: here;" slimscroll="{height: '', color: '#00AAFF', alwaysVisible: 'true'}">
<div ng-bind-html='previewHtml' class="preview-container"></div>
</div>

还建议在css类名中使用前缀，例如：

appInitial-preview-container

这可以在不使用内联样式的情况下解决您的问题。