为每个弹性盒项目创建不同的背景颜色答案

【问题标题】：Create a different background colour for each flex box item为每个弹性盒项目创建不同的背景颜色
【发布时间】：2018-05-10 21:06:24
【问题描述】：

我的网站使用 wordpress 和工具集，基本上，下面的代码返回一个包含三个项目的弹性框。每个项目的背景颜色都需要不同。

我不确定该方法，但研究指出使用类似的方法，但将其本地化到弹性框，而不是站点范围内。我可以请求一些方向的想法吗？

div:nth-child(1) {
    background: gray;
}
div:nth-child(2) {
    background: red;
}
div:nth-child(3) {
    background: cyan;
}

代码块

[wpv-layout-start]
    [wpv-items-found]
<div class="row flexbox-wrap">
    <!-- wpv-loop-start -->
    <wpv-loop>
      <div class="col-md-4 flexbox-equalise">
        <article class="well well-equal">
          <h4>[wpv-post-title]</h4>
          <p>[wpv-post-excerpt output="raw"]</p>
          <p class="lead">[wpv-woo-product-price]</p>
          <div class="well-actions">
            [wpv-woo-buy-or-select add_to_cart_text="Join now!" class="btn-block"]
          </div>
        </article>
      </div>
    </wpv-loop>
    <!-- wpv-loop-end -->
</div>
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

CSS

.flexbox-equalise .well { position: relative; padding-bottom: 76px; }
.flexbox-equalise .well .well-actions  { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; }

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： wordpress css css-selectors flexbox

【解决方案1】：

基于循环创建 3 个<div class="col-md-4 flexbox-equalise"> 兄弟姐妹的假设，您可以像这样使用nth-child 选择器：

.flexbox-equalise:nth-child(1) { background: red; }
.flexbox-equalise:nth-child(2) { background: yellow; }
.flexbox-equalise:nth-child(3) { background: green; }

此选择器将定位任何具有类 flexbox-equalise 并且是兄弟 nr 1-3 的元素

您可以进一步缩小范围，例如将.flexbox-wrap 类添加到选择器中，如下所示：

.flexbox-wrap > .flexbox-equalise:nth-child(n) { ... }

此选择器将定位任何具有 flexbox-equalise 类的元素，它是 flexbox-wrap 的子元素和兄弟编号 1-3。

堆栈sn-p

.flexbox-equalise:nth-child(1) {
  background: red;
}

.flexbox-equalise:nth-child(2) {
  background: yellow;
}

.flexbox-equalise:nth-child(3) {
  background: green;
}

<div class="row flexbox-wrap">
  <div class="col-md-4 flexbox-equalise">
    <article class="well well-equal">
      <h4>[wpv-post-title]</h4>
      <p>[wpv-post-excerpt output="raw"]</p>
      <p class="lead">[wpv-woo-product-price]</p>
      <div class="well-actions">
        "Join now!"
      </div>
    </article>
  </div>
  <div class="col-md-4 flexbox-equalise">
    <article class="well well-equal">
      <h4>[wpv-post-title]</h4>
      <p>[wpv-post-excerpt output="raw"]</p>
      <p class="lead">[wpv-woo-product-price]</p>
      <div class="well-actions">
        "Join now!"
      </div>
    </article>
  </div>
  <div class="col-md-4 flexbox-equalise">
    <article class="well well-equal">
      <h4>[wpv-post-title]</h4>
      <p>[wpv-post-excerpt output="raw"]</p>
      <p class="lead">[wpv-woo-product-price]</p>
      <div class="well-actions">
        "Join now!"
      </div>
    </article>
  </div>
</div>

【讨论】：