Question

我需要根据在加载时动态设置的另一个元素的类来不同地设置body标签的样式。是否可以选择body作为另一个元素的父元素而不使用JS？

在条件＃1下，页面可能如下所示：

<body>
…
    <div class=”first-version”>…</div>
…
</body>

在条件＃2下，页面可能如下所示 - div上的不同类：

<body>
…
    <div class=”second-version”>…</div>
…
</body>

Pseudocode，这不起作用，但让你知道我正在尝试做什么（创建一个主题）：

body[contains div.first-version] {
    margin:100px;
}
body[contains div.second-version] {
    margin:200px;
}

Answer 1

为身体样式使用不同的类，你应该使用Javascript。

Answer 2

试试这个模板：

HTML

<body id="the_body">
<input id="template_1" value="Template 1" type="button"/>
<input id="template_2" value="Template 2" type="button"/>
</body>

CSS：

.template_1{
    color:red;
}
.template_2{
    color:blue;
}

JS（使用jQuery）：

$(function() {
      $("#template_1").click( function()
           {
             $("#the_body").html("<p class='template_1'>template 1</p>");
           }
      );
    $("#template_2").click( function()
           {
             $("#the_body").html("<p class='template_2'>template 2</p>");
           }
      );
});

<强> DEMO

Answer 3

好的，谢谢大家的帮助。那是非常快的，我没想到这一点。对不起，如果问题不清楚。（这是我第一次发布Stack Overflow问题）。

在这种情况下看起来纯CSS解决方案是不可能的，我应该只使用jQuery。 Michael Marr发布了我将要使用的jQuery解决方案的链接：

Apply CSS styles to an element depending on its child elements

是否可以选择body作为父元素？

3 个答案: