Question

我知道这听起来很奇怪，但是有时候我可能需要仅使用CSS来检测“空行”。

“空行”是指HTML元素流中的空白，没有元素，而不是内容为空的元素。

以下是使您更容易理解的摘录：

p {
  font-family: Calibri;
}

*:empty::after {
  content: '---';
  background: red;
}

<p>Text</p>
<p>I know how to style the below "empty element"</p>
<p></p>
<p>Text</p>
<p>Text</p>
<p>I'd like to style the below "no element / empty HTML line" ?</p>

<p>Text</p>

我知道如何样式化空元素。

有什么办法可以使缺少元素的样式化？
我暂时没有发现有用的东西。

谢谢。

Answer 1

我不知道您是否可以使用纯CSS获得所需的功能，但是您可以使用javascript检查下一个同级中的p元素是否包含多个换行符，如果可以，请向其中添加一个类

请参见下面的演示

let allPElements = document.querySelectorAll("p");

for( let p of allPElements) {
  if(p.nextSibling.textContent.includes("\n\n")) {
    p.classList.add("empty");
  }
}

p {
  font-family: Calibri;
}

.empty::after, *:empty::after {
  display:  table; /* Make sure element is a new line*/
  content: '---';
  background: red;
}

<p>Text</p>
<p>I know how to style the below "empty element"</p>
<p></p>
<p>Text</p>
<p>Text</p>
<p>I'd like to style the below "no element / empty HTML line" ?</p>

<p>Text</p>

Answer 2

虽然我并不完全相信这是最好的解决方案，但这确实为解决您的问题提供了一种可能的方法。您可以获取要将“空白”行规则应用到的所有content / html，然后使用.split(/\n/)获取所有行的数组。然后，您可以将一个数组中的所有空白行替换为一个空元素，以便将CSS样式应用于该空白行。

请参见下面的工作示例：

let lines = $('.content').html().split(/\n/).slice(1, -1);
let newHTML = lines.reduce((acc, elem, i) => acc+(elem == "" ? "<span></span>" : elem) + '\n', '');

$('.content').html(newHTML);

p {
  font-family: Calibri;
}

:empty::after {
  content: '---';
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<div class="content">
  <p>Text</p>
  <p>I know how to style the below "empty element"</p>
  <p></p>
  <p>Text</p>
  <p>Text</p>
  <p>I'd like to style the below "no element / empty HTML line" ?</p>

  <p>Text</p>
</div>

Answer 3

使用:empty伪类对我来说似乎有用，这是一支演示它的笔

https://codepen.io/klaussmc/pen/XoXQpG

尽管选择一个空元素之后的元素要困难得多，但在这种情况下我还是会使用JS。

Here's一个工作演示，展示了如何在JS中实现这一目标

选择CSS中不存在HTML标记/元素

3 个答案: