Question

如果父母只有同一个班级，有没有办法让孩子出现？问题的棘手部分是父母和孩子不知道他们的班级。

<div class="red">  
    <div class="red">red</div>
    <div class="yellow">yellow</div>
    <div class="blue">blue</div>
</div>

在这种情况下，我想只显示父母及其第一个孩子。但是，如果我将父类从红色更改为黄色，我想只显示父级及其第二个子级。

是否有可能创造这样的东西？

Answer 1

假设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的id为myDiv，且元素类不包含任何其他内容。

Answer 2

只有在事先知道这些类...

div div { display: none; }

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

Answer 3

是的，但您需要一些额外的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

仅显示子项与父项具有相同的类

3 个答案: