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
}

<强> DEMO

Answer 2

我不得不说我没有IE 7或8，但我确实使用IE模拟器进行了测试。

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

你有一个ID为component-1的元素div，里面有多个div，重复的类component-2, component-3 and component-4

您可以使用类在示例中单独设置这些元素的样式。只更改第一个div（或任何div）的背景颜色的技巧是找出你需要更改的div的级别并应用CSS Pseudo class（MDN）（W3S）（{ {3}}）。

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

.component-2 {
    background: red;
}

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

和以下代码：（2）

.component-4{
    background: pink;
}

将所有带有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-4，所以如果我们省略#component-1，我们就会有3个带有类{{}}的div 1}}在同一层次结构上。

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

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

component-2

现在我们知道无论写在容器中的任何内容都适用于类名.component-2:first-child{ /* css rules here */ }的第一个div，让我们将该类选择器应用于上面提到的选择器之一，如（3）中所述

component-2

此规则指定只有类.component-2:first-child .component-4{ /* css rules here */ }的具有类名component-2的子级的第一个div应该应用css规则。

因此，通过这样做，您将获得结果。

您可以通过将伪类更改为component-4或:last-child来查看伪类可以产生的差异。

我知道这是一个简单答案的长篇文章，但我希望你能从中学到一些东西。

喝彩！

兄弟选择器CSS

2 个答案: