隱藏除了一個僅使用CSS的特定類的所有div

我有HTML以下，我想隱藏所有具有類'msg'的div，但不包括具有相同類的一個div。隱藏除了一個僅使用CSS的特定類的所有div

<html> 

<div class="ref" > 
    <div class="msg"> Message ref </div> 
</div> 

<div class="msg"> Message 1 </div> 
<div class="msg"> Message 2 </div> 
<div class="msg"> Message 3 </div> 

</html>

在這裏，我想隱藏的所有具有的div類「味精」，除了DIV這裏面只用css另一個具有DIV級「裁判」。

我對這種風格是

.msg:not(.ref.msg) { 
    display: none; 
}

但它不是working.Please建議我一些需要調整，以我的CSS樣式來實現的結果。

謝謝。如果你想應用「not'rule我想你會需要這個結構

<style> 
    div:not(.ref){display: none;} 
</style> 
<div class="msg ref"> Message ref </div> 
<div class="msg"> Message 1 </div> 
<div class="msg"> Message 2 </div> 
<div class="msg"> Message 3 </div>`

來源

2015-09-14 Oomph Fortuity

.ref .msg在兩個類之間添加一個空格，您的代碼將ref和msg類一起聲明爲div。因此在.ref .msg – WisdmLabs

之間插入一個空格我懷疑這是不可能的，因爲沒有父節點選擇符，我認爲這裏是必需的，因爲'：not'只接受簡單的選擇符。 –

在類之間添加空間後，@WisdmLabs仍然無法工作 –

你可以試試這個

<style> 
    .msg{ 
    display: none; 
    } 
    .ref .msg{ 
    display: block; 
    } 

</style>

編輯注。

來源

2015-09-14 09:27:40

毫無疑問，它的工作但我們可以做到單一造型？ –

我認爲如果代碼很安靜，在單一樣式規則中很難做到這一點，那麼請注意，您已經在另一個div中「ref」class div，這意味着您在不同的級別工作。您需要在編輯筆記上添加的代碼才能應用「不」規則 –

.msg { display:none; } 

.ref .msg { display:block; }

這應該是工作：

來源

2015-09-14 09:29:26

試試下面的代碼：

CSS

.ref :not(.msg) { 
    display: none; 
}

的Html

<div class="ref" > 
    <div class="msg"> Message ref 1 </div> 
</div> 
<div class="ref" > 
    <div class="msg1"> Message ref 2 </div> 
</div> 
<div class="msg"> Message 1 </div> 
<div class="msg"> Message 2 </div> 
<div class="msg"> Message 3 </div>

確保您.REF下課後添加一個空格。

來源

2015-09-14 15:25:53

隱藏除了一個僅使用CSS的特定類的所有div

回答

相關問題