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

Question

客户端正在使用所见即所得的编辑器来生成如下所示的 HTML。通常，段落元素不应有边距或填充。但是，如果客户希望有一个换行符，他将在编辑器中按两次 enter，这将生成一个空的段落元素。这个空段落元素的顶部边距应为 15 像素。

基本上，这是生成的 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 伪选择器无法应用。