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

Question

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

3

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

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

这些样式必须应用于特定的

元素，本例中为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 代码，因为它在这里不适合。

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

- naota

你需要进行一些服务器端的CSS处理来修改选择器。 - Blender

4个回答

3

SASS和SCSS使您能够执行此类操作（除非我完全错过了您的问题，这是可能的，因为我与前端人员的距离非常远）。

类似于这样的东西：

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

根据你使用的编程语言，这可能值得一试。我见过Ruby、Python、PHP和Java的实现，虽然我只使用了Ruby。

- jmervine

非常感谢。我刚刚查看了SASS和SCSS。它们可能是我想要的东西。我会从现在开始学习它们。 - naota

SASS和SCSS是生成CSS代码的方式，并且所生成的CSS代码仍然会包含类似#editors_area p的内容。在简单的情况下，SASS和SCSS并不会提供太多帮助。 - Jukka K. Korpela

1

你试试这个

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

- Saifuddin Sarker

谢谢Mishu Sarker，我很感激您的建议。它可能会有所帮助。 - naota

1

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

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

- Nelson

1

你可以这样做，但请不要这样做。 - Rory McCrossan

@RoryMcCrossan，我同意一般情况下这并不是推荐的做法，但在特定场景下它可能会很有用。OP评论说每个编辑器都可以编辑他们的CSS，在这种情况下，我更喜欢这种解决方案，而不是使用来自数据库内容动态生成.css文件。 - Nelson

@Nelson，非常感谢您的建议。还有感谢您深入阅读我的需求。这对我非常有帮助。 - naota

@naoki，很高兴这对您有所帮助，您也可以通过点赞来表达感谢 :-) - Nelson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

CSS被设计用于此，因此您的第一种方法是正确的--更不用说您拥有的jQuery方法不起作用。您应该仅在必须在页面加载后更改css属性时使用jQuery，即使这样，您也应该使用addClass()或removeClass()，并在CSS文件中定义这些类。这是更好的关注点分离。