:nth-of-type(3n) 在第 21 个项目后停止工作答案

【问题标题】：:nth-of-type(3n) Stops Working After 21st Item:nth-of-type(3n) 在第 21 个项目后停止工作
【发布时间】：2019-08-25 23:21:16
【问题描述】：

我正在使用 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;
}

这可以完美地为页面的大部分创建三列网格，但是在 nth-of-type(3n) 规则的第 7 个实例之后，网格中断并且不应用此规则。

这有点难以解释，也是我遇到的任何 CSS 问题中的一个反常现象。这是问题的截图：https://imgur.com/5nGOiXI

我尝试过 nth-child 与 nth-of-type 无济于事。

这个问题在 Chrome 和 Safari 中都存在，但在 Safari 中，网格中断直到最后一行才会发生，因此 (3n) 的第 16 个实例，这更加令人困惑。

感谢大家的帮助。

【问题讨论】：

这不会发生在我的设备上。底部边框似乎工作得很好。
嗯，不幸的是，我指的不是底部边框，而是第 7 个 nth-child(3n) 中断实例。以下是该问题的截图：benstewartdesign.com/julianbunker/wp-content/uploads/2019/08/…
请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点——否则，一旦问题得到解决或者您链接的站点无法访问，这个问题将对未来的访问者失去任何价值。发布 Minimal, Complete, and Verifiable example (MCVE) 来证明您的问题将帮助您获得更好的答案。有关详细信息，请参阅Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
我现在已经在最初的帖子中详细说明了这个问题，谢谢
请不要使用您自己的网站来托管有关您的问题的图片。这引发了一些垃圾邮件标志。看到这篇关于分享图片的帖子：Why StackExchange use imgur to host images

标签： wordpress css-selectors

【解决方案1】：

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

感谢您在此处对 Stack Overflow 新手的支持，我将牢记您的社区准则，以备将来发布。

【讨论】：