：nth-​​of-type（3n）在第21个项目之后停止工作

Question

我正在利用WordPress存档模板（archive.php）回显50个帖子的精选缩略图，然后将这些缩略图链接到相应的帖子。以下是执行此操作的代码：

<div class="content">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post (); ?>

   <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark">
                <div class="item">
                    <?php echo get_the_post_thumbnail( $page->ID, 'featuredImageCropped' ); ?>
                    <div class="archive-title">
                        <h4>
                            <?php the_title(); ?>
                        </h4>
                    </div>
                </div>
            </a>

        </div> <!--end #post -->

    <?php endwhile; else: ?>

        <p>Sorry, we've got nothing for you!</p>

    <?php endif; ?>

</div> <!-- end .content -->

这是呈现的HTML：

<div class="content">

        <div id="post-189" class="post-189 post type-post status-publish format-standard has-post-thumbnail hentry category-michigan">

            <a href="https://benstewartdesign.com/julianbunker/2019/08/22/birch-sunrise/" title="Birch Sunrise" rel="bookmark">
                <div class="item">
                    <img width="600" height="400" src="https://benstewartdesign.com/julianbunker/wp-content/uploads/2019/08/Michigan-Birch-Sunrise.jpg" class="attachment-featuredImageCropped size-featuredImageCropped wp-post-image" alt="" srcset="https://benstewartdesign.com/julianbunker/wp-content/uploads/2019/08/Michigan-Birch-Sunrise.jpg 1620w, https://benstewartdesign.com/julianbunker/wp-content/uploads/2019/08/Michigan-Birch-Sunrise-300x200.jpg 300w, https://benstewartdesign.com/julianbunker/wp-content/uploads/2019/08/Michigan-Birch-Sunrise-768x512.jpg 768w, https://benstewartdesign.com/julianbunker/wp-content/uploads/2019/08/Michigan-Birch-Sunrise-1024x683.jpg 1024w" sizes="(max-width: 600px) 100vw, 600px">                      <div class="archive-title">
                        <h4>
                            Birch Sunrise                           </h4>
                    </div>
                </div>
            </a>

</div> <!-- end .content -->

它循环<div id="post-..."></div> 50次，并在第22个项目处中断。

以下是为桌面尺寸屏幕设置此页面样式的CSS：

.content { 
    width:942px;
}
.item {
    overflow: hidden;
    height: auto;
    position: relative;
    display: grid;
    width: 32%;
    margin: 0 2% 2% 0;
    float: left;
}
.item img {
    width: 100%;
    height: auto;
}
.archive .post:nth-of-type(3n) .item {
    margin: 0 0 2% 0;
}
.item .archive-title {
    width: 100%;
    top: 40%;
    position: absolute;
    z-index: 9999;
    text-align: center;
}
.item .archive-title h4 {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 300;
    display: none;
}
.item:hover .archive-title h4 {
    display: block;
    color: #fff;
}

这非常适合为页面的MOST创建一个三列网格，但是在nth-of-type(3n)规则的第7个实例之后，网格中断了，并且该规则不适用。

这有点难以解释，而且在我遇到的任何CSS问题中都是异常现象。这是问题的屏幕截图：https://imgur.com/5nGOiXI

我已经尝试过第n个孩子与第n个类型的孩子。

Chrome和Safari中都存在此问题，但是在Safari中，直到最后一行才发生网格中断，因此（3n）的第16个实例更加混乱。

感谢大家的帮助。

Answer 1

所以我面临的问题不是代码错误，而是50个帖子中有两个没有指定的特征图像，这导致网格对齐中断。

感谢您在这里与Stack Overflow新手保持联系，在以后的帖子中，我会牢记您的社区准则。