Css：仅更改第一个div

我有这样的想法：

。首先{
背景：黄色；
}

1.
2.
3.

可能太容易了？我不知道什么是允许的

。首先{
背景：黄色；
}
.第二{
背景：白色；
}

1.
2.
3.

CSS代表级联样式表。它被称为级联，因为它级联，从上到下流动。无论应用于顶部元素的样式是什么，都将向下流到它的子元素、孙子元素等等，就像瀑布一样

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

这是最终结果

div{
背景色：白色；
}
第一分区{
背景颜色：黄色；
}

1.
2.
3.

另一个答案提到了级联，但这并不是真正的级联问题。您已将

背景

应用于

.first

，它是父元素。嵌套的子元素（

.second

和

.three

）没有继承

背景色

；它们只是显示

的
背景色

这样想：

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

在上面美丽的ascii图表中，
第一个
有一个
黄色
背景色。它里面的所有孩子（占用空间）都显示背景色，因为他们没有背景色

解决方案：
避免
.second
和
.third
从“继承”颜色（同样，它实际上只是显示
.first
-未继承的背景色）的方法是为那些
div
指定一个
背景色。但是，如果应用了
边距
，您会注意到一个问题（黄色将在已应用边距的边缘上窥视）。您还会注意到嵌套的
三个
元素（显示
第二个
的背景色）也存在类似的问题

还有另一个选项，即使用
position:absolute
从DOM流中取出
.second
和
.third
。如果您是CSS新手，我建议您在不了解
定位
的工作原理（因为还有其他后果，例如如何计算
高度
）的情况下，不要这样做，但是它会产生预期的效果

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

演示：
在
第二个
和
第三个
上演示
背景色
，但应用了
边距
。

div{
边框：1px纯红；
}
.首先{
背景：黄色；
}
第二
.3{
背景颜色：蓝色；
保证金：5px；
}
.三{
背景色：白色；
}

1.
2.
3.
一个想法是首先对
div部分上色，以便只覆盖所需的内容（这里是
1
）。为此，你可以考虑线性梯度，你可以很容易地调整大小：


。首先{
线高：1.2米；
背景：线性梯度（黄色、黄色）顶部/100%1.2em无重复；
}
身体{
背景：线性渐变（向右，粉红色，紫色）；
}

1.
2.
3.
1.
2.
3.
所有答案都显示了如何覆盖黄色背景，但没有一个答案告诉您，如果您面临这个问题，主要是因为您的HTML结构错误。