为 post 内容中没有 link 的所有图像添加边距

Question

我想在 post 内容中为所有 没有 link 的图像添加边距。

.post-content img (here I need to target only the images whith no link) {
margin: 1em;
}

所有带有 link 的图片必须保留自己的边距。

请问您有 CSS 甚至 javascript 解决方案吗？

干杯

Answer 1

如果 <img> 是 <div class="post-content"> 的 child，您可以使用此代码。

.post-content > img {
  margin: 1em;
}

因为img在children的第一层。

但如果您有其他包装器，您可以使用此代码为没有 link 的图像添加边距，然后重置带有 link 的图像的边距。

.post-content img {
  margin: 1em;
}

.post-content a > img {
  margin: 0; /* Or the original margin */
}