javascript - 如果段落元素为空，则使它们的 CSS 不同？

Question

客户端使用 WYSIWYG 编辑器生成 HTML，如下所示。通常，段落元素不应有边距或填充。但是，如果客户希望有一个换行符，他将在编辑器中按两次回车，这将生成一个空的段落元素。这个空的段落元素应该有 15px 的 margin-top。

所以基本上，这是一个生成的 HTML 示例。包含内容的段落元素的边距应为 0，但为空的段落标签的边距应为 margin-top:15px

<p>Paragraph 1 content goes here</p>
<p>Paragraph 2 content goes here</p>
<p></p>
<p>Paragraph 3 content goes here</p>
<p>Paragraph 4 content goes here</p>
<p>Paragraph 5 content goes here</p>
<p></p>
<p></p>
<p>Paragraph 6 content goes here</p>

我知道这是一个奇怪的要求，我们处理这个问题的唯一原因是因为非常讨厌的所见即所得编辑器，但我想知道 CSS 中是否有任何方法可以实现这一点，或者我是否需要求助于 Javascript /jQuery? 如果是这样，我将如何在 Javascript/JQuery 中最有效地做到这一点？

Answer 1

这个怎么样：

p:empty { margin: 15px 0 0; }

请注意，简单的空格会阻止:empty应用伪选择器。