：nth-​​child（偶数/奇数）无法与acf一起使用

Question

我正在使用引导程序和高级自定义字段，并且有一个中继器字段会吐出图像和文本。我正在尝试使图像和文本每隔一行循环交换侧面（向左或向右浮动）

以下CSS是最合乎逻辑的，但是我尝试了许多不同的嵌套和变体。

.tour-row .col-md-5:nth-child(odd) {
  float: left !important;
}

.tour-row .col-md-5:nth-child(even) {
  float: right !important;
}

<div class="wrapper clear">
  <div class="row tour-row">
    <h2 class="tour-title">
      Tour 2
    </h2>
    <div class="tour-button btn btn-primary blk-button xola-checkout xola-custom" data-button-id="asdfddddddd">BOOK NOW</div>

    <div class="col-md-5">
      <div class="slideshow-tours">
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/best-funny-dog-breed-mixes-high-resolution-wallpaper-funnypicture-org-pics-of-and-breeding-style.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/dogs-high-resolution-wallpaper-4.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/best-funny-dog-breed-mixes-high-resolution-wallpaper-funnypicture-org-pics-of-and-breeding-style.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/dogs-high-resolution-wallpaper-4.jpg">
        </div>
      </div>
    </div>
    <div class="col-md-7">
      <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>
  <!--end row -->
</div>
<!-- end wrapper -->
<div class="wrapper clear">
  <div class="row tour-row">
    <h2 class="tour-title">
      another tour
    </h2>
    <div class="tour-button btn btn-primary blk-button xola-checkout xola-custom" data-button-id="klasdjfd">BOOK NOW</div>

    <div class="col-md-5">
      <div class="slideshow-tours">
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/1springmural_handlebar.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/dogs-high-resolution-wallpaper-4.jpg">
        </div>
      </div>
    </div>
    <div class="col-md-7">
      <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>
  <!--end row -->
</div>
<!-- end wrapper -->
</div>
<!-- end wrapper -->

Answer 1

根据规范，“：nth-​​child（）CSS伪类根据元素在一组同级中的位置来匹配元素。” （read a good refresher about the nth-child rule here）。在这里，您的CSS规则会转换为“对于作为.tour-row div的ODD子代的每个col-md-5元素，使其向左浮动”或另一种放置方式，“在tour-row div中，使每个剩下的奇数col-md-element浮动。但这不是您想要做的（据我对您的问题的了解）。您想要“对于每个奇数行，使col-md-5向左浮动”。要根据HTML的结构方式执行此操作，您需要一个类似以下的规则：

.wrapper:nth-child(odd) .col-md-5 {
    float: left ;
}

要使偶数行向右浮动，只需执行以下操作：

.wrapper:nth-child(even) .col-md-5 {
    float: right ;
}

要进一步简化操作，您可以执行以下CSS：

.wrapper .col-md-5 {
    float: right ;
}

.wrapper:nth-child(odd) .col-md-5 {
    float: left;
}

希望有帮助！