Css:只改变第一个div

Question

我有这样的东西:

.first {
    background: yellow;    
}

<div class="first">
 1
  <div class="second">
   2
    <div class="three">
     3
    </div>
  </div>
</div>

我想改变头等舱的颜色，所以我想看到“1”，例如黄色背景。可以用 css 实现吗？

Answer 1

另一个答案提到了级联，但这并不是真正的级联问题。您已将 background 应用到 .first，它是父元素。您的嵌套子元素(.second 和 .three)没有继承 background-color；它们只是显示 .first 的 background-color。

这样想:

|-----------------------
| FIRST                |
| |==================| |
| | SECOND           | |
| | |**************| | |
| | | THIRD        | | |
| | |**************| | |
| |==================| |
|----------------------|

在上面漂亮的 ascii 图中，FIRST 有一个 YELLOW 背景色。它里面的所有 child (占用空间)都显示该背景颜色，因为它们没有背景颜色。

解决方案:

避免 .second 和 .third “继承”颜色的方法(同样，它实际上只是显示 .first< 的背景颜色 - 不继承)是为其他答案提供的 div 指定 background-color。但是，如果您应用 margin，您会注意到一个问题(黄色会透过应用边距的边缘窥视)。您还会注意到 nested .three 元素(显示 second 的背景色)也存在类似问题。

还有另一种选择，即使用 position: absolute 将 .second 和 .third 移出 DOM 流。如果您是 CSS 新手，我不建议您先了解 positioning 的工作原理(因为还有其他后果，例如 height 的计算方式)，但是它会产生预期的效果。

无论如何，祝你好运，学习愉快。

演示:

second 和 third 上的 background-color 演示，但应用了 margin。

div {
    border: 1px solid red;
}
.first {
    background: yellow;    
}
.second, 
.three { 
    background-color: blue; 
    margin: 5px; 
}
.three {
    background-color: white;
}

<div class="first">
 1
  <div class="second">
   2
    <div class="three">
     3
    </div>
  </div>
</div>

使用position: absolute;

从DOM流中删除的演示

.first {
    background: yellow;
}
.second {
    position: absolute;
    background-color: blue;
    margin-top: 10px;
}

<div class="first">
 1<br />1<br />
  <div class="second">
   2
    <div class="three">
     3
    </div>
  </div>
</div>