wordpress - 为每个 flex box 元素创建不同的背景颜色

Question

我的站点使用 wordpress 和工具集，基本上，下面的代码返回一个包含三个元素的 flexbox。每个元素的背景颜色都需要不同。

我不确定该方法，但研究指出类似使用，但将其本地化到 flex box，而不是站点范围。我可以请求一些指导意见吗？

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

Answer 1

基于循环创建 3 <div class="col-md-4 flexbox-equalise"> 的假设 sibling ，你可以使用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 的任何元素为目标并且是 sibling nr 1-3

您可以通过例如进一步缩小范围添加.flexbox-wrap选择器的类，像这样:

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

此选择器将以具有类 flexbox-equalise 的任何元素为目标, 是 flexbox-wrap 的 child 和 sibling nr 1-3。

堆栈片段

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