CSS:n子项（偶数）无法正常工作

我有简单的css和html代码，我想知道为什么最后一个垂直图像不工作。我的意思是边框和边距应该添加到最后一个元素，而不是第一个元素

有人知道为什么这样不行吗

看中

：n child偶数将应用于每秒钟的图像秒、四等。当插入没有.vertical类的水平图像时，将打破此顺序

下面是一些变通方法，但逻辑相当简单

首先，我们使用img选择每秒一幅图像 然后，我们使用：not.vertical查找没有.vertical类的图像 然后，我们使用来选择以下图像，并使用img.vertical:nth childodd而不是偶数来恢复顺序。 由于我们现在已经将边框应用于img.vertical的奇数和偶数眼，我们需要从点1选择的图像中删除样式。我们使用第3点中设置的选择器执行此操作，但是使用偶数而不是奇数：img:not.vertical~img.vertical:n个childeven TLDR；更改此部分：

img.vertical:nth-child(even) {
  margin-right: 0px;
  border: 2px solid blue;
}

具体如下：

img.vertical:nth-child(even),
img:not(.vertical) ~ img.vertical:nth-child(odd) {
  margin-right: 0px;
  border: 2px solid blue;
}
img:not(.vertical) ~ img.vertical:nth-child(even) {
  margin-right: 10px;
  border: 0;
}

---

您可以在中看到它是如何工作的。

这是因为水平图像打断：n个childeven在您的代码中它应用于所有的Even:n个childeven，因此它将是第二、第四和第六个，因为您的第六个图像是第二个最后的图像，而不是最后一个图像请阅读。当外部资源消失或固定时，依赖外部资源理解的问题将变得无用。创建一个问题，并将其放在问题本身中。您的MCVE需要包含此CSS操作的HTML。

img.vertical:nth-child(even),
img:not(.vertical) ~ img.vertical:nth-child(odd) {
  margin-right: 0px;
  border: 2px solid blue;
}
img:not(.vertical) ~ img.vertical:nth-child(even) {
  margin-right: 10px;
  border: 0;
}