Question

我有一个布局，由于该布局，有“孩子的孩子”。该布局在台式机上效果很好，但在移动版本上，我希望“标题”可以替代背景颜色。我知道如何执行媒体查询等操作来触发移动版本，但是由于我的HTML有子级和子级div以下的子级，因此背景颜色交替出现问题。

以下代码是我能做的最精简的版本，它可以显示我遇到的问题。我删除了img和href URL，但它们位于最终代码中。这段代码专门用于移动设备，这就是为什么图像隐藏在CSS中的原因。

我敢肯定，我只是想不起来。

请注意，我不打算对HTML进行大修，因为该设计非常具体，很难响应。

谢谢。

.featured-banner span {
  display: block;
  padding: 10px;
}

.featured-banner img {
  display: none;
}

.featured-banner:nth-child(odd) span {
  background: rgba(72, 68, 69, 1);
  color: #ffffff;
}

.featured-banner:nth-child(even) span {
  background: rgba(142, 32, 45, 1);
  color: #ffffff;
}

<div class="featured">
  <div class="container">
    <div class="line-bg">
      <h2></h2>
      <h3></h3>
    </div>
    <div>
      <div class="featured-col col-sm-3"><a target="_self" title="Test" href="" class="featured-banner"><span class="dark">Test</span><img src="" class="img-responsive" alt="Test"></a></div>
      <div class="featured-col col-sm-6">
        <div class="featured-col col-sm-5"><a target="_self" title="Test" href="" class="featured-banner"><span class="red">Test</span><img src="" class="img-responsive" alt="Test"></a></div>
        <div class="featured-col col-sm-7"><a target="_self" title="Test" href="" class="featured-banner"><span class="light">Test</span><img src="" class="img-responsive" alt="Test"></a></div>
        <div class="clearfix"></div>
        <div class="featured-row">
          <div class="featured-col col-sm-7"><a target="_self" title="Test" href="" class="featured-banner"><span class="light">Test</span><img src="" class="img-responsive" alt="Test"></a></div>
          <div class="featured-col col-sm-5"><a target="_self" title="Test" href="" class="featured-banner"><span class="dark">Test</span><img src="" class="img-responsive" alt="Test"></a></div>
          <div class="clearfix"></div>
        </div>
      </div>
      <div class="featured-col-right featured-col col-sm-3"><a target="_self" title="Test" href="" class="featured-banner"><span class="red">Test</span><img src="" class="img-responsive" alt="Test"></a></div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>

Answer 1

尽管这是我的问题，但我将回答我的问题，而不是解决这个问题，以防万一有人也带着孩子的孩子遇到了这个问题。

我过去曾经使用过nth-child，这才让我非常恼火。

有时候，最简单的解决方案是最好的解决方案。

我的简单解决方案是将奇/偶类硬编码到div中，然后将它们定位在媒体查询中。这样，仍然可以替换它们，而无需使用javascript。

第N个孩子：孩子和有孩子的孩子的偶数/偶数

1 个答案: