模板页面CSS覆盖我的原始CSS

Question

我有带CSS的模板页面template.html，CSS包括body {font-family：'Arial'}。 当页面呈现我的应用程序字体时，此页面包含在我的应用程序中，并使用“ ng-include”。 我可以防止我的应用程序的CSS被覆盖我的模板页面吗？

Answer 1

只需将Template.html放在div中，就可以在该div附近的页面中使用内联css或css。

你可以这样

<div style="font-family:'YourNewFontHere'">

// include your html page here 

</div>

Answer 2

我假设它是template.html中的内联样式？ 一种可能是增加您的CSS规则在常规页面中的强度。 例如，假设您的内容周围有一个包装div（或类似名称），则可以设置：

body .wrapper {
  whatever styles you want
}

这将覆盖template.html中的样式。

您也可以在不想被覆盖的常规CSS规则中添加！important。

最好的办法是从template.html中删除所有样式标签-为什么要对该页面进行内联样式设置？

Answer 3

尝试放置在html文件的标题上。

<style> body { font-family: 'Arial'; } </style>

Answer 4

您需要为<body>标签增加应用程序的CSS选择器的特异性。 这应该不太困难，因为您的模板使用body { ... }的简单选择器覆盖了应用程序的CSS。

几个想法。

对于您的应用程序的<body>选择，从body { ... }更改为html body { ... } 。
将类添加到<body>标记<body class="site"> 。 然后将body { ... }更改为.site { ... } 。
从模板中删除body { ... } 。

Answer 5

模板页面是HTML字符串，例如具有自己的CSS的电子邮件正文。 当将其包含在我的应用程序中时，我不知道该页面具有哪些CSS，因为它是动态生成的。 页面渲染后，我知道我的CSS已被覆盖