html - 我如何使用 less/css 只影响没有其他内容的段落中的 imgs？

Question

我正在使用 Jekyll转换来自 markdown 的一些博客文章格式为 HTML。 一些 Markdown 内容看起来像这样:

The previous paragraph.

![Img I want floated left of the content](xyz.jpg)Some text content to
flowed to the right of the image.

The next paragraph.

Jekyll 将其翻译成(大约):

<p>
    The previous paragraph
</p>
<p>
    <img src="xyz.jpg">Some text content to be flowed to the right of the
    image.
</p>

其他 Markdown 内容如下所示:

The previous paragraph.

![Img I want in its own standlone paragraph not floated](abc.jpg)

The next paragraph.

Jekyll 将其翻译成(大约):

<p>
    The previous paragraph
</p>
<p>
    <img src="abc.jpg">
</p>
<p>
    The next paragraph
</p>

这是合乎逻辑的，但并不完全符合我的目的，因为我想 对第一种类型的图像应用一些 CSS 样式，使其漂浮在 文字，所以文字环绕(事实上，我想我想申请 大约 float: left; margin-right: 1em; )，但不是第二种。

(目前我的 CSS 样式已将 float 设置为默认值，这意味着第一个 图片类别不会 float 在段落的左侧，即使那是 Markdown 的含义)。

有没有办法对 <img> 应用一些 CSS 样式？ s 只出现在 a 内 <p>旁边没有其他内容？我正在使用 less ，如果有帮助的话。

或者，是否有其他方法可以解决我的问题？

我绝对需要将输入 markdown 视为不变量 - 它正在 由自动化过程生成，我无法合理更改。我会比较喜欢 也不要修改 Jekyll(尽管我愿意接受这种可能性 作为答案)。

Answer 1

:only-child 伪类有效吗？

p > img:only-child{
  float: left;
  margin-right: 1em;
}