html - 更改列表中一个图像的图像大小

Question

所以我在创建一个网站时遇到了一个与列表相关的小问题。我的目标是使列表中的特定图片稍微大一些，因为它相对于其他图片显得较小。

这里有一张图片供引用:https://imgur.com/9cyt4Gz

为了将 3 个图像堆叠在顶部和底部，我为顶部的三个图像和底部的三个图像创建了两个单独的列表。这就是我认为问题所在。

我尝试使用下面的 css 代码来解决这个问题(注意我使用了 2px 来使结果显而易见)

.white-container ul li:nth-child(3) img {
    width: 2px;
}

结果如下:https://imgur.com/C0jC6uY

HTML 代码在这里:

<div class="white-container">
        <div class="container">
            <div>
                <ul class="firstthree">
                    <li>
                        <img src="images/brush.svg" class="brush" alt="brush">
                        <p class="brush">Graphic Design</p>
                    </li>
                    <li>
                        <img src="images/wand.svg" class="wand" alt="wand">
                        <p class="wand">UI Design</p>
                    </li>
                    <li>
                        <img src="images/code.svg" class="code" alt="code">
                        <p class="code">Front-end Dev</p>
                    </li>
                </ul>
            </div>

            <div>
                <ul class="secondthree">
                <li>
                    <img src="images/settings.svg" class="settings" alt="settings">
                    <p class="settings">Back-end Dev</p>
                </li>
                <li>
                    <img src="images/database.svg" class="database" alt="databases">
                    <p class = "database">Databases</p>
                </li>
                <li>
                    <img src="images/mobile.svg" class="mobile" alt="mobile">
                    <p class="mobile">Mobile Devices</p>
                </li>
            </ul>
            </div>
        </div>
    </div>

显然我不想改变右下角的图像。我不知道还有什么可以尝试的。我试过使用

.white-container ul firstthree li:nth-child(3) img {

我认为这会起作用，但无济于事。任何帮助，将不胜感激。谢谢!

Answer 1

第一步是将您的两个列表合并为一个，因为从语义上讲它们应该是。

<ul>
    <li>
        <img src="images/brush.svg" alt="brush">
        <p>Graphic Design</p>
    </li>
    <li>
        <img src="images/wand.svg" alt="wand">
        <p>UI Design</p>
    </li>
    <li>
        <img src="images/code.svg" alt="code">
        <p>Front-end Dev</p>
    </li>
    <li>
        <img src="images/settings.svg" alt="settings">
        <p>Back-end Dev</p>
    </li>
    <li>
        <img src="images/database.svg" alt="databases">
        <p>Databases</p>
    </li>
    <li>
        <img src="images/mobile.svg" alt="mobile">
        <p>Mobile Devices</p>
    </li>
</ul>

然后告诉浏览器将列表显示为网格。

ul {
    display: grid;
    list-style: none;
    grid-template-columns: repeat(3, 1fr);
}

然后您可以在每个单元格内使用 flex 来垂直排列元素 (ul > li { display: flex; flex-direction: column; })。我会把剩下的留给你。