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；他们只是显示background-color中的.first。

这样想吧：

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

在上面漂亮的ascii图中，FIRST具有YELLOW背景色。里面的所有孩子（占用空间）都显示背景颜色，因为他们没有背景颜色。

解决方案：

避免.second和.third“继承”颜色的方法（再次，它实际上只是显示.first的背景颜色-不继承）是指定一个{其他答案提供的background-color的{​​1}}。但是，如果应用divs，则会发现一个问题（黄色将在应用了边距的边缘窥视）。您还会注意到margin nested元素也出现了类似的问题（显示.three的背景色）。

还有另一种选择，即使用second将.second和.third从DOM流中删除。如果您是CSS新手，不建议您先了解position: absolute的工作原理（因为还有其他后果，例如positioning的计算方式），但是这样做会产生预期的效果

无论如何，祝你好运和快乐的学习。

演示：

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

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>从DOM流中删除的示例

position: absolute;

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

Answer 2

也许太容易了？我不知道允许什么。

.first {
    background: yellow;    
}
.second {
    background: white;
}

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

Answer 3

CSS代表级联样式表。之所以称为级联，是因为它是级联的，它从顶部流到底部。无论您对顶部元素应用哪种样式，都将顺其自然地流到其子元素，其孙子元素等，就像瀑布一样。

您要做的基本上是防止级联从第一div到第二和第三div发生。因此，您可以做的是对所有div应用通用的背景色（白色）。之后（顺序很重要），您可以将特定的背景色应用于第一个div。这将导致第一个div的背景色为黄色，另一个div的背景色为白色。

这是最终结果

div {
  background-color: white;
}
div.first {
  background-color: yellow;
}

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

Answer 4

一个想法是为first div局部着色，以便仅覆盖所需的内容（此处为1）。为此，您可以考虑线性渐变，可以轻松调整尺寸：

.first {
  line-height: 1.2em;
  background: linear-gradient(yellow, yellow) top/100% 1.2em no-repeat;
}

body {
  background: linear-gradient(to right, pink, purple);
}

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

<div class="first" style="font-size:30px;">
  1
  <div class="second">
    2
    <div class="three">
      3
    </div>
  </div>
</div>

您只需要将渐变的高度设置为等于线框的高度（由line-height定义），就可以只对一行进行着色。