使用css确保只显示一个块

Question

{this.state.company && <p class="abc">abc</p>}
{this.state.company2 && <p class="abc">abc</p>}

我的模板引擎中有2个标签，有时会出现一个标签，但是对于用户来说，他应该总是看到一个标签。如何使用css只显示一个项目？

如果我这样做

p:last-child {
   display:none
}

但是当结果只有一个存在时，那将无效。

Answer 1

如果他们不是第一个孩子，你只能隐藏它们：

p:not(:first-child) {
   display:none;
}

Answer 2

如果只有2个区块，那么：

p:nth-child(2) {
   display:none;
}

第二个孩子（如果有的话）永远是最后一个孩子！

Answer 3

制作反向解决方案。将它们标记为hidden，并始终使用css选择器显示第一个。