如何编写匹配单独成行而非行内img元素的CSS选择器

CSS 中的 :only-child 伪类仅统计父元素内的元素节点，文本节点（包括普通文本、换行符、空格等）不会纳入子元素统计范围。示例 2 中 <p> 标签内的文本属于文本节点，不会被 :only-child 识别，所以 <img> 作为父元素内唯一的元素节点，依然会被该选择器命中。

根据项目兼容性要求和开发权限，可以选择以下三种方案：

方案1：HTML 约定实现（推荐，无兼容问题） #

在内容生成环节（比如 Markdown 转 HTML、CMS 内容渲染时），给仅包含图片的段落标签添加专属类名，如 single-image-wrapper，直接通过类名区分样式：

/* 行内图片默认样式 */
p img {
  margin: 0 4px;
}
/* 单独成行的图片样式 */
p.single-image-wrapper img {
  margin: 0;
}

方案2：CSS :has() 实现（现代浏览器可用） #

针对 Chrome 105+、Firefox 121+、Safari 15.4+ 以上的现代浏览器，可以通过 :has() 伪类直接判断父元素内容：

/* 行内图片默认样式 */
p img {
  margin: 0 4px;
}
/* 匹配父元素仅包含单个图片的场景，覆盖外边距 */
p:has(> img:only-child):not(:has(text-node:not(:whitespace))) > img {
  margin: 0;
}

方案3：JS 辅助实现（兼容全浏览器，无需修改HTML） #

如果无法修改HTML生成逻辑，也可以通过少量JS自动给单独成行的图片添加类名：

document.querySelectorAll('p img').forEach(img => {
  const parent = img.parentNode
  // 排查父元素内是否存在非空白的其他内容
  const hasExtraContent = Array.from(parent.childNodes).some(node => {
    if (node === img) return false
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '') return false
    return true
  })
  if (!hasExtraContent) img.classList.add('single-image')
})

对应CSS样式：

p img {
  margin: 0 4px;
}
p img.single-image {
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Leon S.