Question

我使用角度模板加载动态html。该模板已为标签定义了自己的css。

现在，当我加载该模板时，标签的css会应用于我不想要的整个页面。我想将主页面css和模板页面css分开维护。

为模板文件/主页创建类而不是像a,div{那样编写css是不可行的，因为模板已经创建，它们是包含这些常用标记的大文件，主页需要与其他主页保持一致

有谁知道如何限制使用css？

Answer 1

限制CSS范围的唯一真正方法是更多specific with your selectors。

my-component div {
    /* some styles */
}

这会将应用于div的样式仅限制为<div>元素中找到的<my-component>个代码。

<my-component>
    <div>will get styled</div>
</my-component>

<div>won't get styled</div>

Answer 2

如果你使用像Webpack这样的捆绑包，你也可以选择命名空间。例如，CSS Modules将允许您将命名空间与模块配对。您将CSS 导入您的JS模块，并具有一个特定的，带前缀的命名空间，可以应用于每个html classname属性，例如。 <a class="MyCoolNamespace__a" />。

否则，最好的选择是特异性。选择器越具体，优先级越高。例如。 body > div > a.awesome与a.awesome。

最后请记住，您可以内联自己的风格。元素样式属性<a style="color:blue" />应该是最具体的，并且对其他DOM元素没有影响。显然，它有same specificity作为内联<style />标记声明，但它会覆盖后者。

听起来你可能想要在你对造型感兴趣的html之前编写或注入特定的内联样式块。如果您可以注入样式块，还可以重置您可能已定义的任何样式以限制或限制使用某些选择器。例如div.awesome { margin:0; }等

编写和限制自定义样式的范围

2 个答案: