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

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

所谓“空行”，我指的是HTML元素流中的一个缺口，缺少元素，而不是内容为空的元素

以下是一个易于理解的片段：

p{
字体系列：Calibri；
}
*：空：：之后{
内容:"--";；
背景：红色；
}

文本

我知道如何设计下面的“空元素”


正文

正文

我想设计下面的“无元素/空HTML行”样式

Text

使用

：empty

伪类似乎适合我，这里有一支笔演示它

虽然选择空元素后面的元素要困难得多，但在本例中我将使用JS

---

一个演示如何在JS中实现这一点的实用演示我不知道你是否可以用纯CSS获得你想要的功能，但是你可以使用javascript来检查下一个同级元素的

p

元素何时包含超过1个换行符，如果是的话，可以添加一个类

请参见下面的演示：

let allPElements=document.querySelectorAll（“p”）；
for（让p表示所有元素）{
if（p.nextSibling.textContent.includes（“\n\n”））{
p、 类列表。添加（“空”）；
}
}

p{
字体系列：Calibri；
}
.empty:：after，*：empty:：after{
显示：table；/*确保元素是新行*/
内容:"--";；
背景：红色；
}

文本

我知道如何设计下面的“空元素”


正文

正文

我想设计下面的“无元素/空HTML行”样式

Text

虽然我不完全相信这是最好的解决方案，但这确实提供了一种解决问题的可能方法。您可以获取要应用“空白”行规则的所有内容/html，然后使用

.split（/\n/）

获取所有行的数组。然后，您可以用一个空元素替换数组中的所有空行，这样您的CSS样式将适用于它。

请参见下面的工作示例：

let line=$（'.content'）.html（）.split（/\n/）.slice（1，-1）；
让newHTML=lines.reduce（（acc，elem，i）=>acc+（elem==“”？“”：elem）+'\n'，“”）；
$（'.content'）.html（newHTML）
p{
字体系列：Calibri；
}
：空：：之后{
内容:"--";；
背景：红色；
}

正文

我知道如何设计下面的“空元素”


正文

正文

我想设计下面的“无元素/空HTML行”样式

正文

那么您试图选择一个没有内容的元素？是使用javascript和option吗？@JacobSchneider是的，或者我可能会说HTML流中有一个缺口。我不知道什么会更清楚。我认为为了简单起见，只需说“空标签”。CSS样式元素。你不能为任何松散的文本片段设置样式，更不用说CSS中的空白了。我知道如何使用
：empty
，请注意，我是在片段中使用的。我不是这么问的。