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

【问题标题】：CSS nth-child on nested divs with different classes具有不同类的嵌套 div 上的 CSS nth-child
【发布时间】：2015-10-11 19:35:28
【问题描述】：

我有嵌套的 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 在偶数时设为白色。

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

这是我拥有的 CSS - 但无法正常工作，它要么给我全白，要么如果我修改它，它全给我灰色，但不是 ALTERNATING。

.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 中做任何样式。

【问题讨论】：

:nth-child 和 :nth-of-type 只计算具有 same 父元素的元素。他们必须是兄弟姐妹。
你介意举个例子吗？示例，我在网上看到的似乎并不实用或直观。
所有:nth-child 的问题是：我是我父母的第 n 个孩子吗？您的代码就是一个完美的例子，请在下面查看我的答案。

标签： javascript html css css-selectors background-color

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案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，它的范围内有多个类型。

【讨论】：

【解决方案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;
}

【讨论】：