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

Question

I need to implement dynamic css styles for certain elements based on a user's role or group identity. 我需要根据用户的角色或组标识为某些元素实现动态CSS样式。

My idea is to fetch the required dynamic values (hex colors, background image urls) from my database, write them to the page, then use jQuery to add styles with these values to the elements that are to be dynamic. 我的想法是从数据库中获取所需的动态值（十六进制颜色，背景图像url），将其写入页面，然后使用jQuery将具有这些值的样式添加到要动态的元素中。 Seems straightforward. 似乎很简单。 Has anyone done it this way? 有人这样做吗？

Another way is to somehow override external style sheet styles with styles defined in a header style block. 另一种方法是用标题样式块中定义的样式以某种方式覆盖外部样式表样式。 Would this work? 这行得通吗？ Can you share css styles between a style block and an external sheet? 可以在样式块和外部图纸之间共享CSS样式吗？ Can the shared styles cascade? 共享样式可以级联吗？

Answer 1

You can mix internal and external styles. 您可以混合使用内部和外部样式。 Internal, external, and inline styles all cascade, with inline styles taking precedence over internal styles, which themselves take precedence over external styles. 内部，外部和内联样式都是级联的，内联样式优先于内部样式，而内部样式本身优先于外部样式。

If you want to dynamically change styles based on user permissions, why not add the relevant classes and id in the body tag, eg 如果要基于用户权限动态更改样式，为什么不在body标签中添加相关的类和ID，例如

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

And then use CSS to separate the roles and groups out, eg 然后使用CSS分离角色和分组，例如

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

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

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

You could go one step further and use a CSS pre-processor like LESS to style several groups for individual roles, eg 您可以更进一步，并使用LESS之类的CSS预处理器为各个角色设置多个组的样式，例如

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-03 03:41:20

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-03 03:41:20

解决方案1
1 已采纳 2016-03-03 03:41:20