CSS - 从样式块扩展样式表样式答案

【问题标题】：CSS - extend stylesheet styles from a style blockCSS - 从样式块扩展样式表样式
【发布时间】：2016-06-16 05:09:04
【问题描述】：

我需要根据用户的角色或组身份为某些元素实现动态 CSS 样式。

我的想法是从我的数据库中获取所需的动态值（十六进制颜色、背景图像 url），将它们写入页面，然后使用 jQuery 将具有这些值的样式添加到要动态的元素中。看起来很简单。有人这样做过吗？

另一种方法是用标题样式块中定义的样式以某种方式覆盖外部样式表样式。这行得通吗？您可以在样式块和外部工作表之间共享 CSS 样式吗？共享样式可以级联吗？

【问题讨论】：

标签： javascript css

【解决方案1】：

您可以混合使用内部和外部样式。内部、外部和内联样式都是级联的，内联样式优先于内部样式，内部样式本身优先于外部样式。

如果您想根据用户权限动态更改样式，为什么不在body标签中添加相关的类和id，例如

<body id="admin" class="group-1">

然后使用 CSS 将角色和组分开，例如

#admin{
    background-color: rgb(255,155,105);
}

.group-1{
    font-family: sans-serif;
}

.group-2{
    font-family: Roboto;
}

您可以更进一步，使用 LESS 之类的 CSS 预处理器为各个角色设置多个组的样式，例如

#admin {
    background-color: rgb(255, 155, 105);
    .group-1 {
        font-family: sans-serif;
    }
    .group-2 {
        font-family: Roboto;
    }
}

【讨论】：

但是css定义的一部分可以在标题的样式块中，而另一部分在外部工作表中吗？样式可以阻止“扩展”和外部 css 文件吗？
是的，它们将级联，块（或内部）样式优先于外部样式。