Question

我正在创建一种CMS。在这个系统中，每个编辑器都可以定义自己的CSS，如下所示。这种风格应该适用于他们自己的文章。

<style>
p{
color:blue;text-align:center;
}
a{
color:red;
}
</style>

这些样式必须应用于特定div，在本例中为id="editors_area"。

<body>
    <div id="editors_area">
        ===Styles should be applied only here.===
        Each editors article are displayed in this area.
    </div>
    ===Styles should NOT be applied here.===
</body>

为实现这一目标，我计划将#editors_area插入到编辑器的CSS中，作为服务端的后代选择器，如下所示。

<style>
#editors_area p{
color:blue;text-align:center;
}
#editors_area a{
color:red;
}
</style>

但我想有更简单的方法可以达到上述要求。

修改我删除了javascript代码。这不适合。

任何想法都将受到赞赏。提前谢谢。

Answer 1

CSS就是为此而设计的，所以你的第一个方法是正确的 - 更不用说你拥有的jQuery方法是行不通的。

只有在页面加载后才需要使用jQuery来更改css属性，即使这样，你也应该使用addClass()或removeClass()并在CSS文件中定义这些类。这是一个更好的关注点分离。

Answer 2

SASS和SCSS让你有能力做这样的事情（除非我完全忽略了你的问题，这是可能的，因为我就是你从前端人那里得到的）。

类似的东西：

#editors_area
    a 
        color:blue
        text-align:center
    p
        color:red

根据您所使用的语言，可能值得一试。我见过Ruby，Python，PHP和Java的实现，虽然我自己只使用Ruby。

Answer 3

你试试这个

$("#editors_area > *").css("color","blue"); // * may be p or a whatever

Answer 4

如果您正在寻找一种从jQuery动态插入CSS块的方法，那么您可以执行以下操作：

$('<style type="text/css">
    #editors_area p {
       color:blue;text-align:center;
    }
    #editors_area a {
       color:red;
    }
    </style>').appendTo('head');

如何将多个CSS选择器应用于特定的div？

4 个答案: