javascript - 在任何文本之前隐藏帖子中的第一张图片(无可用段落)

Question

在 Blogger 中，段落未包含在 <p></p> 中标签，它们显示为带换行符的纯文本 ( <br/> )。如果前面有任何文本，我想隐藏出现在任何文本之前的第一张图像而不是第一张图像。

例如:

This is some text (image AFTER text should be visible):

    <img src="image.png"/>

在这个例子中隐藏图像:

    <img src="image.png"/>

This is some text (image BEFORE text should be hidden)

Answer 1

因为没有办法在 CSS 中操作文本节点，这里有一个干净的方法来解决你的问题:

绝对定位图像，使其出现在文本之前，并在父帖子 div 中添加填充

.post {
  padding-top: 150px;
  position: relative;
}

.post img {
  display: none;
}

.post img:first-of-type {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
}

<div class="post">
  Hello there is a hidden image below Hello there is a hidden image below
  <img src="https://via.placeholder.com/350x150" />
  <img src="https://via.placeholder.com/350x150" />
  <img src="https://via.placeholder.com/350x150" />
</div>

<div class="post">
  <img src="https://via.placeholder.com/350x150" /> Hello there is a hidden image below Hello there is a hidden image below
  <img src="https://via.placeholder.com/350x150" />
  <img src="https://via.placeholder.com/350x150" />
</div>