Question

在CSS 3中是否有可能将某个 css类（不是属性/值）应用/删除到基于它的父类的元素？

我将举一个具体的例子来尝试更好地解释我的意思 - 说我有一个<div>，根据情况，我可以应用样式类my-large-div或my-small-div。在其中，我有一些带有Bootstrap类form-group和form-group-lg的输入/按钮：

<div class="my-large-div">
    ...
    <div class="my-form-group form-group form-group-lg">
        <!-- some input field -->
    </div>
</div>

现在，我想要发生的是，当应用my-large-div时，内部div将具有form-group-lg，但是当应用my-small-div时，它不会。我从概念上认为这样的CSS：

.my-large-div .my-form-group {
    add-class("form-group-lg");
}

.my-small-div .my-form-group {
    remove-class("form-group-lg");
}

现在，我知道这可以使用Javascript / jQuery来实现，但是我正在寻找一种仅支持CSS的解决方案，如果存在这样的解决方案，或者是一个无法完成的明确答案。

一种可能的解决方案是始终拥有my-form-group的两份副本，display设置为none或initial，但我觉得这也可能很混乱效率低下（如果我改变了类以响应用户在页面中的操作）。

我当然不希望做的一件事是在我自己的CSS中复制form-group和form-group-lg的整个定义，因为这意味着每次更改我必须改变我的Bootstrap类（加上它打破了抽象）。

Answer 1

不。 CSS无法从DOM中删除元素，只有 Javascript 才能访问DOM。

Answer 2

是的，使用:not()选择器可以执行类似

的操作

.form-group-lg {
    display: none;
}

.my-form-group:not(.my-small-div) .form-group-lg {
    display: block;
}

这样做是检查类my-form-group的div是否也有类my-small-div，如果没有，form-group-lg将显示为块，否则它将显示只是display: none;

Answer 3

无法在CSS中有条件地设置或删除类。虽然您可能知道，这可以通过Javascript轻松完成。

<?php for ($i=1; $i <= 7 ; $i++) { ?> <td> <input type="button" id="myButton1" value="0" onClick="javascript:change(this);"></input> </td> <?php } ?>

根据Samir的示例，您可以使用e.g. if( $(‘#target’).hasClass(‘animal’) ) { $(document.body).addClass(‘dog’); }选择器根据父元素有条件地更改特定类的样式。