Question

我正在尝试弄清楚如何将有针对性的CSS样式应用于博客列表输出中的ODD和EVEN博客文章。特别是ODD上的白色背景和偶数的浅灰色背景。有没有办法做到这一点？很抱歉提供的代码可能有点过分（我是菜鸟）

<!-- /templates/blog.liquid -->

{% comment %}

  Loop through a defined number of articles with the 'paginate' tag.
  Don't forget to close the tag after your loop.
{% include 'blog-slider' %}
{% include 'blog-grid' %}

{% endcomment %}



{% paginate blog.articles by 9 %}

<section class="collection blog">
  <div class="wrapper">
    
    
    

    <header class="content-util">
    {% include 'breadcrumb' %}
    {% include 'social-icons' %}
    </header>

    
    
    
    <div class="grid">
      <div class="collection-container blog-container">
        {% comment %}
        <header class="collection-header">
          <div class="container">
            {% if current_tags %}
              <h1>{{ blog.title | link_to: blog.url }} &mdash; {{ current_tags.first }}</h1>
            {% else %}
              <h1>{{ blog.title }}</h1>
            {% endif %}
          </div>
        </header>
{% endcomment %}
        
        
        {% comment %}
        <div class="mobile-aside-container">
          <a href="#" class="button simple">{{ 'layout.navigation.blog_menu' | t}}</a>
          <aside>
            {% include 'blog-sidebar' %}
          </aside>
        </div>
{% endcomment %}
        
        <div class="blog-list">
          {% for article in blog.articles %}
          <article>
            <header>
              <h2><a href="{{ article.url }}">{{ article.title }}</a></h2>
              {% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
              {% capture date %}<time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
              <p class="byline">{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}</p>
            </header>
            {% if article.image %}
              <div class="article-image">
                <a href="{{ article.url }}"><img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.title }}"></a>
              </div>
            {% endif %}
            <section>
              {% comment %}
                Add a surrounding div with class 'rte' to anything that will come from the rich text editor.
                Since this is just a listing page, you can either use the excerpt or truncate the full article.
              {% endcomment %}
              <div class="rte">
                {% if article.excerpt.size > 0 %}
                  {{ article.excerpt }}
                  <p class="read-more"><a href="{{ article.url }}" class="button outline">{{ 'blogs.article.read_more' | t }}</a></p>
                {% else %}
                  <p>{{ article.content }}</p>
                {% endif %}
              </div>

              {% comment %}
                Show off meta information like number of comments and tags.
              {% endcomment %}
              <div class="post-meta">
                {% if blog.comments_enabled? %}
                <a href="{{ article.url }}#Comments" class="comments">{{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}</a>
                {% endif %}

                {% include 'tags-article' %}
              </div>
            </section>
          </article>
          {% endfor %}

        </div>
        {% if paginate.pages > 1 %}
        <footer class="collection-footer">
          {% include 'pagination' %}
        </footer>
        {% endif %}
      </div>

      <div class="aside-container">
        <aside>
          {% include 'blog-sidebar' %}
        </aside>
      </div>
    </div>

  </div>
</section>

{% endpaginate %}

/*============================================================================
  #Blog
==============================================================================*/
.recent-posts-collection {
  padding: $verticalContainerPadding 20px;
  background-color: $blogBackgroundColor;
  {% if settings.homepage_show_borders %}
  border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
  {% endif %}

  @include mediaQuery($max, $mobile) {
    padding: 20px;
  }

  .wrapper {
    @if $blogFullWidth {
      @include outer-container();
    } @else {
      @include outer-container($siteWidth);
    }
  }

  .wrapper > header {
    @include clearfix();
    position: relative;
    margin-bottom: 20px;
    border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%);
    h4 {
      //float: left;
      margin: 0;
      line-height: 2;
      font-size: em(28px);
      text-transform: $primaryTitleTextTransform;
      font-weight: $primaryTitleTextWeight;
    }
    a.button.outline {
      position: absolute;
      top: 50%;
      right: 0;
      @include transform(translateY(-50%));
      @include buttonOutline;
    }

    @include mediaQuery($max, $mobile) {
      text-align: center;
      a.button.outline {
        position: relative;
        @include transform(translateY(0));
      }
      padding-bottom: 20px;
    }
  }

  .recent-posts-container {
    @include grid();
  }

  &.layout-2 {
    article {
      @include grid-item(6);

      @include mediaQuery($max, $mobile) {
        @include grid-item(12);
      }
    }

  }
  &.layout-3 {
    article {
      @include grid-item(4);

      @include mediaQuery($max, $tablet) {
        @include grid-item(6);

        &:nth-of-type(3n){
          display: none;
        }
      }
      @include mediaQuery($max, $mobile) {
        @include grid-item(12);
        &:nth-of-type(3n){
          display: block;
        }
      }
    }
  }

  article {
    @extend %blog-article;

    header {
      text-align: center;
    }

    .article-image {
      margin-bottom: 4px;
    }

    section {
      font-size: 15px;
    }

    time {
      position: relative;
      top: -6px;
      font-family: $navFontStack;
      //font-weight: $siteHeaderNavTextWeight;
      text-transform: $siteHeaderNavTextTransform;
      font-size: em(11px);
    }

    @include mediaQuery($max, $mobile) {
      @include grid-item(12);
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%);

      &:last-of-type {
        padding-bottom: 0;
        border-bottom: 0;
      }
    }
  }
}

.blog-list,
.blog-permalink {
  article {
    @extend %blog-article;
    margin: $verticalContainerPadding 0 0;

    &:last-of-type {
      border-bottom: 0;
      padding-bottom: 0;
    }

    header {
      text-align: center;
      margin-bottom: 20px;
    }

    a.button.outline {
      display: inline-block;
      @include buttonOutline;
      margin-top: 10px;
    }

    footer {
      .pagination {
        margin-top: 20px;
      }
    }
  }
}
.blog-list {
  article {
    margin: $verticalContainerPadding 0 20px;
    padding-bottom: 40px;
  }
}

// Extend Product Thumbnail
%blog-article {
  header {
    h1,
    h2 {
      font-weight: $blogTitleTextWeight;
      font-size: em(40px);
      margin-bottom: 0;
      font-weight: normal;
      a {
        color: $primaryTitleColor;
        &:hover,
        &:focus {
          color: $primaryHoverColor;
        }
      }
      @include mediaQuery($max, $tablet) {
        font-size: em(28px);
      }
      @include mediaQuery($max, $mobile) {
        font-size: em(24px);
      }

    }
    h5 {
      font-weight: $blogTitleTextWeight;
      font-size: em(22px);
      margin-bottom: 0;
      a {
        color: $primaryTextColor;
        &:hover {
          color: $primaryHoverColor;
        }
      }
    }
    p.byline {
      font-family: $navFontStack;
      //font-weight: $siteHeaderNavTextWeight;
      text-transform: $siteHeaderNavTextTransform;
      font-size: em(11px);
    }
  }

  .article-image {
    margin: 0 0 ($gutter/2) 0;
    img {
      display: block;
      margin: 0 auto;
    }
  }

  section {

    img {
      display: block;
      max-width: 100%;
      margin: 0 auto 26px;
      height: auto;
    }
    p {
      img {
        margin: 0 auto;
      }
    }
    p:last-of-type {
      margin-bottom: em(8px);
    }
    a.button.outline {
      margin-top: 0px;
    }
    .post-meta {
      margin-top: 20px;
      padding-top: 10px;
      border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
      display: table;
      width: 100%;

      a.comments {
        color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
        font-family: $navFontStack;
        //font-weight: $siteHeaderNavTextWeight;
        text-transform: $siteHeaderNavTextTransform;
        font-size: em(12px);
        text-decoration: none;
        min-width: 120px;
        display: table-cell;
        &:hover {
          color: $primaryHoverColor;
        }
      }
      ul.tags {
        text-align: right;
        display: table-cell;
        li {
          display: inline-block;
          color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
          font-family: $navFontStack;
          text-transform: $siteHeaderNavTextTransform;
          font-size: em(12px);

          &:last-child {
            a {
              margin-right: 8px;
            }
          }

          a {
            @include buttonOutline;
            padding: 4px 0;
            font-size: 0.875em;
            border: none;
            box-shadow: 8px 0 0 mix($primaryTextColor, $primaryBackgroundColor, 10%), -8px 0 0 mix($primaryTextColor, $primaryBackgroundColor, 10%);
            background-color: mix($primaryTextColor, $primaryBackgroundColor, 10%);
            margin-right: 8px;
            margin-left: 10px;
            &:hover {
              color: $primaryTextOnAccentColor;
              background-color: $primaryAccentColor;
              border-color: $primaryAccentColor;
              box-shadow: 8px 0 0 $primaryAccentColor, -8px 0 0 $primaryAccentColor;
            }
          }

        }
      }
    }
  }

  footer {
    margin-top: 40px;

    .comments-container {
      margin: 40px 0 0;
      padding: 40px;
      border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);

      @include mediaQuery($max, $mobile) {
        padding: 40px 0;
      }
      h3 {
        text-align: center;
        text-transform: $siteHeaderTitleTextTransform;
      }
      p.form-success {
        text-align: center;
        font-size: em(14px);
      }
      .comment {
        padding: 20px;
        background: $contentBoxBackgroundColor;
        {% if settings.primary_dropshadow %}
        box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
        {% endif %}
        font-size: em(14px);
        margin-bottom: 20px;

        p.author {
          margin-bottom: .5em;
          font-size: em(15px);
          span {
            font-weight: bold;
          }
          time {
            font-style: italic;
          }
        }
      }
      .pagination {
        margin-top: 0;
      }
    }
    .add-comment {
      padding: 0 40px;
      margin: 20px auto 0;
      max-width: 600px;
      h3 {
        text-align: center;
      }
      @include mediaQuery($max, $mobile) {
        padding: 0;
      }
    }
  }
}

Answer 1

在CSS3中，您可以使用nth-child(odd)和nth-child(even)选择器

＆＃13;

article:nth-child(odd) {
  background: white;
}
    
article:nth-child(even) {
  background: #C8C8C8;
}

＆＃13;

<article>This is an article</article>
<article>This is a second article</article>
<article>This is a third article</article>
<article>This is the fourth article</article>

＆＃13;

Answer 2

使用CSS作为Richard suggested完全没问题，但你也可以使用cycle在液体中实现相同的功能（文档甚至建议）：

cycle的用途包括：


将奇数/偶数类应用于表中的行

例如：

{% for article in blog.articles %}
  <article class="{% cycle 'odd', 'even' %}">
    ... 
  </article>
{% endfor %}

Stack Overflow上有一个类似的问题here。

在（Shopify）中将不同的类应用于ODD / EVEN博客文章

2 个答案: