css - 如何在图像之间绘制垂直线但不在边缘

Question

假设您有三个连续的图像，并且您想要在它们之间显示一条垂直线。我会使用边框，但我不想在最边缘显示它(在第一张图片的左边，在第三张图片的右边)。仅使用 CSS 实现此目标的最佳策略是什么？

Answer 1

您可以使用 last-child 伪选择器来确保您的集合中的最后一张图像没有边框:

img{
    border-right:1px solid #000;
}

img:last-child
{
    border-right:none;
}

Working Example

浏览器对 last-child 的支持可能会有所不同。

如果您需要支持 last-child 不可用的浏览器，您可以将一个类应用于最后一个图像并以这种方式 Hook 它。