代码之家 › 专栏 › 技术社区 › Gowtham Shiva

从父DIV中选择两个级别下的子元素

css

-1

Gowtham Shiva · 技术社区 · 6 年前

我现在有一个类似下面的代码来呈现像rubix立方体一样的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>

正在尝试为9指定不同的颜色 divs 使用 nth-child 但是浏览器正在考虑 潜水器 作为3个不同的元素而不是9个,因为有一个中间的DIV #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  */

有人能帮我区分一下吗 #孩子 仅适用于 CSS

2 回复 | 直到 6 年前

Luke 6 年前

在选择子项之前,必须先选择父项:

.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>

Ger Mc 6 年前

给每个孩子一个身份证,然后用它来分配颜色 HTML是:

<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>

CSS是:

#child1{
    background-color: red;
    color:red;
}

#child2{
    background-color: blue;
}

#child3{
    background-color: green;
}

#child4{
    background-color: pink;
}

#child5{
    background-color: yellow;
}

#child6{
    background-color: white;
}

#child7{
    background-color: black;
}

#child8{
    background-color: orange;
}

#child9{
    background-color: red;
}