在每个2列/ 1行视图中显示的第四个LI后，如何为每个LI设置样式？

Question

因此，我有一个博客布局（主题），该博客布局将文章连续显示为两列，每篇文章都是UL内部的LI。

然后我得到了这个CSS代码，基本上从第三个LI开始向每个LI添加margin-top: 20px;（因此，它不会在第一行中增加边距，并且在它们和标题之间不留空格）还将clear: both;添加到每个2个LI（每行的第一个LI）。

.module-row.two-cols ul li:nth-child(n+3) {
    margin-top: 20px;
} 
.module-row.two-cols ul li:nth-child(2n+1) {
    clear: both;
}

此代码为：

<div class="content-wrap module-row two-cols clearfix">
 <ul>
   <?php while (have_posts()): the_post(); ?>  
   <li class="col-sm-6">
     <div class="item content-out co-type1">
       <?php get_template('article-column');?>
     </div>
   </li>
   <?php endwhile; ?>
 </ul>
</div>

当我尝试在第4个LI之后插入广告LI时，我的问题就从CSS开始-因此，它基本上会每2行/ 4列显示一次广告。有没有一种更改CSS的方法，以便我可以正确插入该广告并保持当前CSS逻辑（顶部保留空白）？另外，广告LI的类别为col-sm-12（全宽）。

所以我想要这个，如果可能的话，用CSS

在每个第四个col-sm-6 LI之后，基本上通过PHP代码插入另一个具有col-sm-12类的LI。谢谢！

我可以在PHP中进行此操作，更改主题的逻辑并在那里进行计数，而不是通过CSS，但是我想知道是否可以通过CSS进行计数，因为我最好不要更改主题，而仅更改CSS。 “劫持”它并通过PHP而不是CSS进行处理，看起来像这样-这就是我想要的CSS逻辑：

在第三个LI之后的所有LI中添加一个margin-top，从第一个LI开始的每个2至2个LI中添加一个clear: both，并同时添加margin-top和{ {1}}进入第5个LI。

Answer 1

这是一个可能的解决方案。 这个想法是，借助模运算，您可以定位到第三个while循环，第6个，第9个等等。我不是PHP开发人员，所以我希望这里没有语法错误，如果有人指出我的话，我将不胜感激！ ：）

编辑：快速修复

编辑：HTML结构不正确，但是我不知道您最终希望使用li和div实现什么，所以我将其保留为您在问题中的编写方式。

<div class="content-wrap module-row two-cols clearfix">
 <ul>
   <?php $counter = 0 ?>
   <?php while (have_posts()): the_post(); ?>
    <?php if ($counter % 3 == 0){
         <div class="col">
       // code for your ad here
         </div>
    <?php } else {?>
   <li class="col-sm-6">
     <div class="item content-out co-type1">
       <?php get_template( 'row' );?>
     </div>
   </li>
    <?php } ?>
    <?php $counter = $counter + 1 ?>
   <?php endwhile; ?>
 </ul>
</div>