兄弟选择器CSS

Question

我有一个具有以下结构的页面。 我想为每个“ componet-4”应用背景色，但只想对第一个元素“ componet-4”应用不同的颜色。 如何从其他方面指出第一个要素。我也必须支持IE7和IE8。 我不能使用Javascript，我想通过使用CSS实现它，这可能吗？ 请给我建议。

 <html>
 <body>
 <div id="component-1">

 <div class="component-2">
    <div class="component-3">
     <div class="component-4">  
    </div>
    </div>    
  </div>


  <div class="component-2">
    <div class="component-3">
     <div class="component-4">  
    </div>
    </div>    
  </div>

  <div class="component-2">
    <div class="component-3">
     <div class="component-4">  
    </div>
    </div>    
  </div>  

</div>

 </body>
 </html>

请给我建议。

Answer 1

使用伪类的first-child

.component-4{
  background:red
}
.component-2:first-child .component-4{
  background:green
}

演示

Answer 2

我不得不说我没有IE 7或8，但是我确实使用IE仿真器对其进行了测试。

这是您需要的示例： http : //jsfiddle.net/fatgamer85/ffVW3/

您有一个ID为component-1 div元素，其中有多个div，这些div重复了component-2, component-3 and component-4

您可以使用示例分别为类设置这些元素的样式。 仅更改第一个div（或任何div）的背景颜色的技巧是找出您需要更改的div级别，并将其应用CSS伪类（ MDN ）（ W3S ）（ CSSTricks ）。

它相当简单。 如下代码：（1）

.component-2 {
    background: red;
}

应用带有红色背景的class component-2类的所有元素。

和以下代码：（2）

.component-4{
    background: pink;
}

将所有带有class component-4类的元素应用为粉红色背景。 根据您的代码，编写上述代码的另一种方式是：（3）

.component-2 .component-4{
    background: pink;
}

适用与类的所有元素component-4内component-2与粉红色的背景。

我们知道您的代码中有多个component-2 ， component-3和component-4类。

按照层次结构， #component-1具有多个component-2 ，而component-3具有component-3 ，而component-3具有component-4因此，如果我们省略#component-1我们将在同一层次结构上具有3个div，它们的类为component-2 。

伪选择器具有用于各种情况的选择器（第一个孩子，最后一个孩子，第n个孩子，偶数，奇数等）。 对于您的代码，您知道需要更改第一个元素的颜色。

因此，为了更改第一个component-4颜色，我们需要向上遍历树以找到重复的节点。 在这种情况下是component-2 。 选择该元素以使用伪类添加CSS规则的正确方法是（4）

.component-2:first-child{
    /* css rules here */
}

现在我们知道容器中写入的内容都适用于classname component-2的第一个div，让我们将该类选择器应用于上述选择器之一，如（3）中所述

.component-2:first-child .component-4{
    /* css rules here */
}

该规则指定，只有第一个具有类component-2的div的子类具有类名component-4应应用css规则。

因此，通过这样做，您将实现您的结果。

您可以通过将伪类更改为:last-child或:nth-child(2)来了解不同的伪类。

我知道这是一篇很简单的答案，但是我希望您能从中学到一些东西。

干杯！

兄弟选择器CSS

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-12-31 08:57:40

解决方案2
1 2013-12-31 09:31:32

兄弟选择器CSS

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-12-31 08:57:40

解决方案2 1 2013-12-31 09:31:32

解决方案1
5 已采纳 2013-12-31 08:57:40

解决方案2
1 2013-12-31 09:31:32