Html 第n个类型，第一个子项不能正常工作

我试图给出第1、3、5 img或div元素的radius属性。 尝试了第一个子元素，.image img:nth类型（1），但它们都给出了每五个元素的半径。有人能给我一个为什么会发生这种情况的答案吗

.image img:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

---

您将选择器设置错误，

图像img:first child

表示每个

.images

div的第一个子级

img

，这就是它将边框半径设置为所有图像的原因，因此，请使用class

.container

从父级div开始查找其第一个，第三和第五个子分区，然后将边框添加到这些子分区中的图像中

因此，请尝试使用以下方法：

/* Select every other div item starting with first */
.container .gallery-container:nth-child(odd) .image img{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

希望它能起作用。

您可以尝试以下方法：

考虑到您的需要，

odd

CSS已经有了一个名为“nth-child（）”的属性，用于此类用途

您案例中的参数是

odd

只需将其传递给父类，我看到

galary container

选择

nth-child（）

对于该类，您也可以自由使用它的后续类

.gallery容器：第n个子（奇数）img{
显示：内联块；
边框左上半径：20px；
边框左下半径：20px；
}

---

对于您的选择器位置。

Lol。。我看到你试着选择两个答案，但是你只能选择一个，所以你可以选择最好的一个，如果需要的话投票。不客气，很高兴这有帮助。

/* Select every other div item starting with first */
.container .gallery-container:nth-child(odd) .image img{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

How about the :nth-child(3n+3)?
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

How about the :nth-child(2n+1)?

(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
etc.

# 3, 6, 9 element
.container .gallery-container:nth-child(3n+3) .image img{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

# 1, 3, 5 element
.container .gallery-container:nth-child(2n+1) .image img{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}