如果父類具有特定類，則應用/刪除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類

回答

相關問題