代码之家 › 专栏 › 技术社区 › Takit Isy Surendra

选择CSS中没有HTML标记/元素

css html

Takit Isy Surendra · 技术社区 · 7 年前

我知道这听起来很奇怪,但有时我可能需要检测一个“空行”只用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>

我知道如何设计空元素的样式。

有没有什么方法可以将元素的缺失风格化?
我暂时没有发现任何有用的东西。

3 回复 | 直到 7 年前

Danny 7 年前

我不知道你是否能用纯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>

Nick Parsons Felix Kling 7 年前

.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>