css - :nth-child 不使用 achor 标签

Question

带有 padding-right 样式的 img class="preview" 标签和 .preview:nth-child(5) 删除 padding-right 工作正常，直到我在图像周围添加锚标签。我仍然有填充，但 :nth-child() 不再起作用。

HTML 学习领域 /

    <a href="#"><img class="preview" id="nar_bu" src="images/bu/nar.jpg" alt=""></a>
    <a href="#"><img class="preview" id="npr_bu" src="images/bu/npr.jpg" alt=""></a>
    <a href="#"><img class="preview" id="pate_bu" src="images/bu/pate.jpg" alt=""></a>
    <a href="#"><img class="preview" id="other_bu" src="images/bu/other.jpg" alt=""></a>
</div>

CSS

.preview { padding: 19px 18px 0 0; }
.preview:nth-child(5) { padding-right: 0; }

我该如何解决？

Answer 1

将选择器放在锚上，因为它现在是第 n 个孩子，并且图像是锚的唯一孩子

.preview { padding: 19px 18px 0 0; }
a:nth-child(5) .preview { padding-right: 0; }