4

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

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

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

有可能创造出这样的东西吗？

4

3 回答 3

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

于 2013-07-11T18:41:54.667 回答
3

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

div div { display: none; }

div.yellow .yellow,
div.blue .blue,
div.red .red { display: block; }
于 2013-07-11T18:48:56.403 回答
0

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

于 2013-07-11T18:39:05.450 回答