div里嵌套的div为什么为什么无法在样式表里设置background-color?

Question

像这样：

<div id="container">
    <div id="1st">1</div>
    <div id="2nd">2</div>
    <div id="3rd">3</div>
</div>

通过样式表设置背景颜色的时候，只显示父元素的背景色

#container{
        width: 100%;
        height: 100%;
        background-color: red;
    }

而无论怎么设置子元素的背景色都不起作用：

#1st{
        display: block;
        width: 100px;
        height: 100px;
        background-color: black;
    }

结果如下：

只有通过显示的在style属性中设置backgound-color才起作用：

<div id="1st" style="background-color: black">1</div>

这是为什么呢？

Answer 1

https://jsfiddle.net/zhc23bz9/5/

你的 id 取名有问题，你可以将第一个id 改成first试试看，

#container {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

#first {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
}

#2nd {
  display: block;
  width: 100px;
  height: 100px;
  background-color: black;
}

<div id="container">
    <div id="first">1</div>
    <div id="2nd">2</div>
    <div id="3rd">3</div>
</div>

Answer 2

在CSS的命名规范中，名称不能以数字开始，只能以字母、连字符、下划线开始。之后可以是字母、连字符、下划线或数字。