html - 如何使用 css nth-child(-n+3) 仅显示列表中的前三个图像

问题描述

基本上，这是一个列表中包含 10 个项目的新闻提要。前 3 篇文章将显示与该文章关联的图像，以下条目应隐藏图像。

我不希望在 php 中添加额外的规则来实现这一点。我想用 CSSnth-child或类似的东西来做。

这是CSS

.container ul {
    list-style-type: none;
}

.articlePhoto {
    display: none;
}

.container li:nth-child(-n+3) {
    display: block;
}

这是HTML

<div class='container'>
    <ul>

        <li class='articleContainer'>
            <div class='articlePhoto'>
                <img
                    class='img-fluid rounded'
                    src='https://via.placeholder.com/350x150'
                    alt='Lorem ipsum'
                >
            </div>
            <div>
                <a
                    class='categoryList'
                    href='?ncid=1004&naid=10000&nacid=1000'
                    title='Lorem ipsum'
                >Lorem ipsum</a>
            </div>
            <div>
                Lorem ipsum
                <hr>
                 friday, 17 august, 2018
                <hr>
                Lorem ipsum, Lorem ipsum, Lorem ipsum
            </div>
        </li>

    </ul>
</div>

这个 CSS 只是我在放弃之前尝试的最后一个。我尝试了很多组合，但都没有达到我想要的效果，我不知道为什么它不起作用。这个当前的组合根本没有图片。

我尝试过的其他人没有运气： .container li :nth-child(-n+3) img，，， .container img:nth-child(-n+3)ul:nth-child(-n+3) img

并且不断地不断地..

标签： htmlcsscss-selectors

html - 如何使用 css nth-child(-n+3) 仅显示列表中的前三个图像

问题描述

解决方案

推荐阅读