Question

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

有谁知道为什么这不起作用？

* {margin: 0; padding: 0;}
.wrap {width: 250px; border: 1px solid red;overflow:hidden;}

img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
img.vertical {
  width: 45%;
  float: left;
  margin-right: 10px;
}
img.vertical:nth-child(even) {
  margin-right: 0px;
  border: 2px solid blue;
}

Answer 1

:nth-child(even)将适用于每个第二张图像（第二张，第四张等）。当您插入没有.vertical类的水平图像时，您将破坏此顺序。

以下是一种解决方法，但逻辑非常简单。

首先，我们使用img.vertical:nth-child(even)
然后，我们使用.vertical

:not(.vertical)

然后，我们使用general sibling selector选择以下图片，并使用img.vertical:nth-child(odd)代替even还原订单。
由于我们现在已经将边界应用于img.vertical的奇数和偶数，我们需要从我们在第1点选择的图像中删除样式。我们使用第3点中设置的选择器执行此操作，但是使用even代替odd：img:not(.vertical) ~ img.vertical:nth-child(even)

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;
}

您可以在this fiddle中了解其工作原理。

CSS：nth-child（偶数）无法正常工作

1 个答案:

CSS：nth-​​child（偶数）无法正常工作

1 个答案:

CSS：nth-child（偶数）无法正常工作