只顯示孩子與父母同班同學

Question

如果父母同班同學，是否有方法顯示孩子？問題棘手的部分是父母和孩子不知道他們的班級。

在這種情況下，我想只顯示父母和其第一個孩子。但是，如果我將父類從紅色更改爲黃色，我只想顯示父母及其第二個孩子。

是否有可能創建這樣的事情？

Answer 1

只有在類前手知...

div div { display: none; } 

div.yellow .yellow, 
div.blue .blue, 
div.red .red { display: block; } 

Answer 2

是的，但您需要一些額外的CSS類定義。嘗試是這樣的：

div.red{ 
    display:block; 
} 
div.red div.red{ 
    display: block; 
} 
div.red div.yellow{ 
    display: none; 
} 
div.red div.blue{ 
    display: none; 
} 

等..如果你不想明確地寫出來一樣，唯一的辦法是JavaScript的。 JSFIDDLE

Answer 3

假設CSS類未知類名稱，您將無法單獨在CSS中執行此操作。但是，如果他們從一組定義的類，你可以通過做一些像這樣（使用CSS3 :not selector這個例子中）做到這一點：

div.red > :not(.red), 
div.yellow > :not(.yellow), 
div.blue > :not(.blue) 
{ 
    display: none; 
} 

如果你想涉足的JavaScript，你也許能夠完成通過執行類似（JSFiddle）任務：

var myDiv = document.getElementById('myDiv'); 
for(var i=0, j=myDiv.children.length; i<j; ++i) 
{ 
    if(myDiv.children[i].className != myDiv.className) 
    { 
     myDiv.children[i].style.display = 'none'; 
    } 
} 

這假定div有myDiv的ID和元素類不包括其他任何東西。