Question

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

我不确定这种方法，但是研究指出了类似于使用的东西，但是只将其本地化为弹性盒，而不是局部范围。我可以请一些方向想法吗？

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">兄弟姐妹的假设，您可以像这样使用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。

Stack snippet

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

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

1 个答案: