:nth-child(even/odd) 不适用于 acf

Posted 2023-03-25

【中文标题】:nth-child(even/odd) 不适用于 acf

【英文标题】：:nth-child(even/odd) not working with acf

【发布时间】：2018-12-04 09:43:27

【问题描述】：

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

以下 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 -->

【问题讨论】：

请将您拥有的 php 代码替换为浏览器看到的生成的 html。

@TylerH 我替换了。

喜欢这个jsfiddle.net/bu93m26p ?

nth-child 不是这样工作的。它有父关系。尝试添加另一个 col-md-5 作为同级并检查自己。

你应该在父元素上定位第n个子元素，然后下降jsfiddle.net/bu93m26p/9

【参考方案1】：

根据规范，“:nth-child() CSS 伪类根据元素在一组兄弟元素中的位置匹配元素。” (read a good refresher about the nth-child rule here)。在这里，您的 CSS 规则转换为“对于每个 col-md-5 元素，它是 .tour-row div 的奇数子元素，使其向左浮动”或另一种说法，“在 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;

希望有帮助！