Question

我有嵌套的div，我正在尝试交替使用背景颜色和边框大小。

我有以下HTML

<div class="container">
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">FirstPart</p>
    </div>
  </div>
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">SecondPart</p>
    </div>
  </div>
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">ThirdPart</p>
    </div>
  </div>
</div>

我希望能够将奇数.white-bg-alt .white-bg的背景颜色设置为灰色，偶数时为白色。

我还希望当.white-bg-alt .white-bg为奇数时，p.colored-p为白色，偶数时为灰色。

这是我拥有的CSS - 但没有工作，它要么全部为白色，要么我修改它，它会给所有灰色，但不是交替。

.white-bg-alt .white-bg:nth-child(odd) {
  background-color: #EAEAE3;
  border-top: 0px;
}
.white-bg-alt .white-bg:nth-child(even) {
  border-bottom: 2px;
  background-color: #FFF;
}
.white-bg-alt .white-bg:nth-child(odd) .colored-p {
  background-color: #FFF;
}
.white-bg-alt .white-bg:nth-child(even) .colored-p {
  background-color: #EAEAE3;
}

为什么这不起作用的任何想法？我能用Javascript做到这一点，但我不想在javascript中做任何样式。

Answer 1

您正在为nth-child定位错误的元素。目前您的目标是.white-bg，但总是奇数，因为其范围内只有一个此元素。

相反，您希望在.white-bg-alt元素之间切换。

因此，对以下内容的简单更改将解决您的问题：

.white-bg-alt:nth-child(odd) .white-bg {
  background-color: #EAEAE3;
  border-top: 0px;
}
.white-bg-alt:nth-child(even) .white-bg {
   border-bottom: 2px;
   background-color: #FFF;
}
.white-bg-alt:nth-child(odd) .white-bg .colored-p {
   background-color: #FFF;
}
.white-bg-alt:nth-child(even) .white-bg .colored-p {
  background-color: #EAEAE3;
}

Answer 2

问题是white-bg-alt是奇数/偶数元素而不是white-bg元素

.white-bg-alt:nth-child(odd) .white-bg {
  background-color: #EAEAE3;
  border-top: 0px;
}
.white-bg-alt:nth-child(even) .white-bg {
  border-bottom: 2px;
  background-color: #FFF;
}
.white-bg-alt:nth-child(odd) .white-bg .colored-p {
  background-color: #FFF;
}
.white-bg-alt:nth-child(even) .white-bg .colored-p {
  background-color: #EAEAE3;
}

<div class="container">
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">FirstPart</p>
    </div>
  </div>
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">SecondPart</p>
    </div>
  </div>
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">ThirdPart</p>
    </div>
  </div>
</div>

Answer 3

.white-bg始终是其范围内的第一个孩子，所以它总是很奇怪。

请改为尝试：

.white-bg-alt:nth-child(odd) .white-bg {
  background-color: #EAEAE3;
  border-top: 0px;
}
.white-bg-alt:nth-child(even) .white-bg {
  border-bottom: 2px;
  background-color: #FFF;
}
.white-bg-alt:nth-child(odd) .white-bg .colored-p {
  background-color: #FFF;
}
.white-bg-alt:nth-child(even) .white-bg .colored-p {
  background-color: #EAEAE3;
}

这会将:nth-child选择器应用于.white-bg-alt div，其范围内有多个类型。

Answer 4

:nth-child以及:nth-of-type仅计算具有相同父元素的元素。他们一定是兄弟姐妹。但由于您的.white-bg-alt都具有相同的父元素，因此您可以使用这些元素：

.white-bg-alt:nth-child(odd) .white-bg {
  background-color: #EAEAE3;
  border-top: 0px;
}
.white-bg-alt:nth-child(even) .white-bg {
  border-bottom: 2px;
  background-color: #FFF;
}
.white-bg-alt:nth-child(odd) .white-bg .colored-p {
  background-color: #FFF;
}
.white-bg-alt:nth-child(even) .white-bg .colored-p {
  background-color: #EAEAE3;
}

嵌套div的CSS nth-child具有不同的类

4 个答案: