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

标签 css

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

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

最佳答案

CSS 就是为此而设计的,因此您的第一种方法是正确的——更不用说您使用的 jQuery 方法行不通了。

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

关于css - 如何将多个 CSS 选择器应用于特定的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13044652/

相关文章:

javascript - 自定义 Google Map v3 控件位置问题

css - 如何获取内联 block 元素内的文本以进行识别?

css - item多行时如何在同一行显示字段标签和字段项?

css - 内联 block 不调整子图像的宽度

javascript - 如何使 Google map 信息窗口的内容完全适合所有浏览器?

html - 在 CSS 和 HTML 中使用简单的 div 布局遇到很多麻烦

javascript - 剪刀石头布游戏的循环计数(潜在的 jquery 问题)

html - CSS Hover 属性显示非 div 元素

html - 正如 Bootstrap 网格所说,在移动设备中以不同方式对齐缩略图?

html - 容器内的全宽导航