3

我正在创建一种 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 代码。这不适合这里。

任何想法将不胜感激。提前致谢。

4

4 回答 4

5

CSS 就是为此而设计的，所以您的第一个方法是正确的——更不用说您拥有的 jQuery 方法不起作用。

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

于 2012-10-24T07:35:43.600 回答
3

SASS 和 SCSS 让你有能力做这样的事情（除非我完全错过了你的问题的重点，这是可能的，因为我从前端人员那里得到的信息差不多）。

就像是：

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

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

于 2012-10-24T07:41:21.707 回答
1

你试试这个

$("#editors_area > *").css("color","blue"); // * may be p or a whatever
于 2012-10-24T07:36:51.080 回答
1

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

$('<style type="text/css">
    #editors_area p {
       color:blue;text-align:center;
    }
    #editors_area a {
       color:red;
    }
    </style>').appendTo('head');
于 2012-10-24T07:38:50.957 回答