目標特定的一組CSS類

我在文檔中有兩個元素實例。一個是slide，另一個是slide和slide--current。下面是這個標記的例子。目標特定的一組CSS類

<div class="slide slide--current"> 
    <h2 class="title title--centered title--modifier">Slide 1</h2> 
    <div class="text-block"> 
    <p>text</p> 
    </div> 
</div> 

<div class="slide"> 
    <h2 class="title title--centered title--modifier">Slide 2</h2> 
    <div class="text-block"> 
    <p>text</p> 
    </div> 
</div>

如果我想要的目標text-block當它具有slide--current作爲父母，我會用.slide--current > .text-block爲我的選擇。 但是如果我想要在slide--current沒有text-block時該怎麼辦？我在問，因爲這兩個元素都需要將類slide應用於他們。如果我使用.slide .text-block樣式將應用於slide--current時，他們不應該。這是否是:not()選擇器的情況？

來源

2016-11-21 privateer35

您可以使用僞選擇：

.slide:not(.slide--current) { 
    // styling here 
}

在你的情況，只要的.text塊總是.slide的直接子：

.slide > .text-block { 
    // Apply to all text blocks regardless of state of slide 
} 

.slide:not(.slide--current) > .text-block { 
    // Only applied if parent slide is not current 
}

你也許可以實現通過閱讀@Rounin的答案獲得相同的結果，並通過顛倒思維過程併爲所有文本塊設置一些基本樣式，然後在幻燈片最新時覆蓋它們來避免僞選擇器。

來源

2016-11-21 23:59:22

它是'.slide：not（.slide - current）> .text-block'在我的情況下？ – privateer35

如果文本塊始終是幻燈片的直接子節點，當然，我只是說明了使用僞選擇器:) –

但是如果我要針對text-block當它沒有 slide--current？

這是關於如何在正確順序中使用CSS級聯的教訓。

.text-block { 

BASIC .text-block STYLES 

} 

.slide .text-block { 

ADDITIONAL .slide .text-block STYLES 

} 

.slide--current .text-block { 

ADDITIONAL .slide--current .text-block STYLES 

}

基本上，您從核心樣式開始，隨着上下文越來越具體化，累積地添加。

來源

2016-11-22 00:04:48 Rounin

目標特定的一組CSS類

回答

相關問題