如果父类具有特定类，则应用/删除CSS类

在CSS 3中，是否可以将某个css类（非属性/值）应用于基于其父类的元素？如果父类具有特定类，则应用/删除CSS类

我举一个具体的例子，试图更好地解释我的意思了 - 说我有一个<div>，要看情况下，我可以将样式类my-large-div或my-small-div。它里面，我的一些输入/自举类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，但我觉得这可能是凌乱以及低效的（比如说，如果我在响应用户的更改类在页面中的动作）。

有一件事我肯定不想做的就是复制的form-group和form-group-lg整个定义在我自己的CSS，因为这与自举类的每一个变化意味着我将不得不改变我的（加它打破了抽象）。

来源

2016-07-14 Itai

什么是“css类”？如果你不是在谈论CSS属性，你想从元素中“移除”什么？ – BoltClock

使用jQuery，这里是一个添加onload类的例子。 http://stackoverflow.com/questions/4995440/add-class-to-object-on-page-load –

@BoltClock - 我想使用类给我的抽象。我可以这样说“这个元素应该按照这个类来定义样式”，从而将类型的实际细节抽象为类，我希望能够根据这个类来控制整个类结构（无论是否应用）到一个元素的父类。而不是'.a。b {/ *很多属性* /}'我希望做'.a .b {/ *现在使用一切.c调用* /）' – Itai

没有。 CSS无法从DOM中删除元素，只有Javascript可以访问DOM。

来源

2016-07-14 04:18:43 Jefsama

我不希望它删除_element_，只是修改它的类。我怀疑这是不可能的，但这不是一回事。 – Itai

呀使用:not()选择，你可以这样做

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

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

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

来源

2016-07-14 04:25:15

我不想隐藏内容，只删除'form-group-lg'所需的样式。它应该仍然使用其他类呼叫的任何东西显示。 – Itai

在这种情况下不是最好不得不分开使用类吗？取决于父母，随时隐藏和显示其他人？ @sillyfly –

没有办法有条件地指定或删除CSS中的类。虽然你可能知道，但这可以很容易地在Javascript中完成。

e.g. 
if($(‘#target’).hasClass(‘animal’)) { 
$(document.body).addClass(‘dog’); 
}

可以有条件地改变取决于父元素但是特定类别的风格，采用了:not()选择，按照萨米尔的例子。

来源

2016-07-14 04:32:16 Gary

如果父类具有特定类，则应用/删除CSS类

回答

相关问题