CSS：仅当类名存在时才显示元素（无法控制类名的值）？

Question

完全确定没有纯粹的CSS方式可以做到这一点-但以为我还是会问！

我正在使用一些看起来像这样的把手代码：

<li class="person">{{ person_name }}</li>

我只想在person_name为非空白时显示元素。 person_name的值可以为空白或任何ASCII字符串。

[我知道我可以在数据中添加person_exists之类的列，如果show为非空白或为空，则将其设置为person_name，然后执行以下操作：

<li class="person {{ person_exists }}">{{ person_name }}</li>
<style>
.person { display: none; }
.person.show { display: block; }

但是有什么方法可以显示或隐藏这些元素，而不必在数据中添加额外的列？

Answer 1

使用:empty（https://developer.mozilla.org/en-US/docs/Web/CSS/:empty）

.person:empty {
  display: none;
}

<li class="person">Person 1</li>
<li class="person"></li>
<li class="person">Person 2</li>