<div>父母不影响<div>孩子？

Question

我正在使用元素周期表，我遇到了一个问题：

* {
  text-align: center;
}
p {
  font-size: 5px;
  margin-top: -40px;
}
div {
  height: 70px;
  width: 70px;
  line-height: 60px;
  font-family: Trebuchet MS;
  font-size: 30px;
}
.row1 {
  margin-left: 92px;
  background-color: #FFCC33;
}
#lithium {
  margin-top: 170px;
}

<div class="row1">
  <div id="lithium">Li
    <p>Lithium</p>
  </div>
  <div id="sodium">Na
    <p>Sodium</p>
  </div>
  <div id="potassium">K
    <p>Potassium</p>
  </div>
  <div id="rubidium">Rb
    <p>Rubidium</p>
  </div>
  <div id="cesium">Cs
    <p>Cesium</p>
  </div>
  <div id="francium">Fr
    <p>Francium</p>
  </div>
</div>

在这种情况下，我想将所有子类'row1'的div元素更改为＃FFCC33。如果我只是把所有div的名字（即#lithium，＃sodium，... {background-color：SOMECOLOR;}，但是当我放入类名（即row1）时，它只会影响第一个孩子（在此案件，它的锂）。我已经尝试过将id改为class，反之亦然无效。这应该是可行的还是我在这里做错了什么？

Answer 1

试试这个

.row1 > div {
  margin-left: 92px;
  background-color: #FFCC33;
}

<强> Demo Here

Answer 2

如果您正在尝试确保<div>的所有.row1子项的背景颜色为FFCC33，请尝试这样的选择器：

.row1 > div {
    background-color: #FFCC33;
}

Answer 3

您必须删除height:70px

中的div

＆＃13;

＆＃13;

* {
  text-align: center;
}
p {
  font-size: 5px;
  margin-top: -40px;
}
div {
  width: 70px;
  line-height: 60px;
  font-family: Trebuchet MS;
  font-size: 30px;
}
.row1 {
  margin-left: 92px;
  background-color: #FFCC33;
}
#lithium {
  margin-top: 170px;
}

＆＃13;

<div class="row1">
  <div id="lithium">Li
    <p>Lithium</p>
  </div>
  <div id="sodium">Na
    <p>Sodium</p>
  </div>
  <div id="potassium">K
    <p>Potassium</p>
  </div>
  <div id="rubidium">Rb
    <p>Rubidium</p>
  </div>
  <div id="cesium">Cs
    <p>Cesium</p>
  </div>
  <div id="francium">Fr
    <p>Francium</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;