jquery - 对不同页面上的颜色框使用不同的 CSS 样式？

Question

我在一个站点上使用 Colorbox（用于弹出窗口的 js 库）。在某些页面上，我需要对颜色框和/或其部分使用不同的外观（例如关闭框，使用不同的 png 文件）。

由于 js 库会动态生成弹出 div 的代码，那么在不复制任何代码的情况下，为网站上的不同页面处理不同“外观”的最有效方法是什么？

score 2 · Accepted Answer

虽然它即时生成 HTML，但它仍然使用与其他所有内容相同的 CSS。因此，只需使用所需的 css 添加所需的页面<style>标签，这将覆盖默认样式或准备几个 css 文件，其中 css 规则覆盖默认样式，您将在需要时将其附加到您的页面。

score 1 · Accepted Answer

您可以考虑的一件事是颜色框本身没有 CSS，而是在其自己的页面中弹出内容并通过 ajax 调用它。将特定弹出窗口的所有 CSS 都放在其自己的页面中。我以前用过这种方法。颜色框文件中唯一需要的 CSS 是背景颜色/透明度/图像。

score 0 · Accepted Answer

给<body>一个id与文件名相同的an，例如<body id="index">and <body id="about_us">，而不是在文件中添加样式，colorbox.css例如

body#index wrapper gallery
{
 background-color: #foo;
}

我使用slimbox并按照上述方式进行操作。

score 0 · Accepted Answer

我不认为你需要一个单独的 CSS 文件。

让我们在第一页说你的颜色框在

<div class="divA">

    // Color Box 1
</div>

<div class="divB">

    // Color BoX 1
</div>

你可以在 colorBox 类之前添加这个类来完成你的工作。

.divA  colorbox-class
{
    // Your Style Color Box 1
}

.divB  colorbox-class
{
    // Your Style Color Box 2
}

4 回答 4