将样式应用于相邻兄弟的孩子

Question

我正在尝试使用CSS根据同一行中有多少图像来连续调整图像大小。例如，如果同一g <- lapply(value_new_attr, function(x) {g <- delete_edge_attr(g, x)}) 中有四个img个元素，则它们会以某种方式设置样式。以下是基于this answer的工作代码：

HTML：

p

CSS：

<p>
  <img src="preview.png">
  <img src="preview.png">
  <img src="preview.png">
  <img src="preview.png">
</p>

结果如下：

但是，这不适用于.post-content p img:first-child:nth-last-child(4), .post-content p img:first-child:nth-last-child(4) ~ img { width: 25%; /* fallback for browsers that don't support calc */ width: calc((100% / 4) - 0.8%); margin-left: calc(1%); } .post-content p img:first-child:nth-last-child(4) { /* First image in group of four */ margin-left: 0; } 标记中包含的图像，但其余格式相同，如下所示：

a

在这种情况下，我无法找到解决方案。任何帮助将不胜感激。

Answer 1

:nth-child()，:first-child和兄弟选择器需要基于a标签，因为那些是孩子和兄弟姐妹，然后选择器应该结束使用img来定位图像的CSS属性。

p a:first-child:nth-last-child(4) img,
p a:first-child:nth-last-child(4) ~ a img {
    width: 25%;
    width: calc((100% / 4) - 0.8%);
    margin-left: calc(1%);
}

p a:first-child:nth-last-child(4) img {
    margin-left: 0;
}

<p>
  <a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a>
</p>

Answer 2

您是否尝试在CSS img之前用a替换first-child？也就是说，

.post-content p a:first-child:nth-last-child(4) img,
.post-content p a:first-child:nth-last-child(4) ~ a img {
    width: 25%;
    width: calc((100% / 4) - 0.8%);
    margin-left: calc(1%);
}

.post-content p a:first-child:nth-last-child(4) img {
    margin-left: 0;
}