css - :nth-child not working with achor tags

Question

img class="preview"标签使用 padding-right 样式，而 .preview:nth-child(5) 删除 padding-right 效果很好，直到我在图像周围添加 anchor 标签。我仍然有填充，但 :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

将选择器放在 anchor 上，因为它现在是第 n 个 child ，而图像是 anchor 的唯一 child

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