从父div

Question

目前，我有一个类似下面的代码，可以渲染9个像魔方的盒子

#child {
  height: 30px;
  width: 30px;
  float: left;
  margin: 1px;
  background-color: rgba(235, 26, 224, 0.829);
}

#outer {
  position: absolute;
}

    <div id="outer">
        <div id="inner">
            <div id="child"></div>
            <div id="child"></div>
            <div id="child"></div>
        </div>
        <div>
            <div id="child"></div>
            <div id="child"></div>
            <div id="child"></div>
        </div>
        <div>
            <div id="child"></div>
            <div id="child"></div>
            <div id="child"></div>
        </div>
    </div>

我正在尝试使用divs为9 nth-child分配不同的颜色，但是浏览器将divs视为3个不同的元素，而不是9，因为中间有一个div { {1}}是#inner

的另一个父项

#child

有人可以在此方面帮助我，以仅将#child:nth-child(2) { background-color: blue; } #child:nth-child(3) { background-color: green; } #child:nth-child(4) { background-color: red; } #child:nth-child(5) { background-color: yellow; } #child:nth-child(6) { background-color: black; } /* and so on for 9 divs */的{​​{1}} div与众不同吗？

Answer 1

在选择子级之前，您必须先选择父级：

.inner div {
  display: inline-block;
  width: 100px;
  height: 100px;
}

/* The first inner element, first child */
.inner:nth-child(1) :nth-child(1) {
  background: black;
}
/* The first inner element, second child */
.inner:nth-child(1) :nth-child(2) {
  background: red;
}
/* The first inner element, third child etc.. */
.inner:nth-child(1) :nth-child(3) {
  background: blue;
}

.inner:nth-child(2) :nth-child(1) {
  background: green;
}
.inner:nth-child(2) :nth-child(2) {
  background: orange;
}
.inner:nth-child(2) :nth-child(3) {
  background: yellow;
}

.inner:nth-child(3) :nth-child(1) {
  background: pink;
}
.inner:nth-child(3) :nth-child(2) {
  background: purple;
}
.inner:nth-child(3) :nth-child(3) {
  background: brown;
}

 <div id="outer">
   <div class="inner">
     <div></div>
     <div></div>
     <div></div>
   </div>
   <div class="inner">
     <div></div>
     <div></div>
     <div></div>
   </div>
   <div class="inner">
     <div></div>
     <div></div>
     <div></div>
   </div>
</div>

Answer 2

只需给每个孩子一个ID并使用它来分配颜色   HTML是：

'F77= arm-linux-gnueabihf-gfortran make'

CSS是：

<div id="outer">
                    <div>
                        <div id="child1">1</div>
                        <div id="child2">2</div>
                        <div id="child3">3</div>
                    </div>
                    <div>
                        <div id="child4">4</div>
                        <div id="child5">5</div>
                        <div id="child6">6</div>
                    </div>
                    <div>
                        <div id="child7">7</div>
                        <div id="child8">8</div>
                        <div id="child9">9</div>
                    </div>
                </div>