在我使用的许多前端框架中，都有将三元组或 if 分支注入到 HTML 逻辑中的选项。这是我经常使用的逻辑。一种特殊情况是在没有数据时显示。
我刚刚偶然发现了一种 CSS 模式，它让我的生活变得更加轻松：:only-child 伪类。
在 React 中，我会做这样的“事情”...
{
data.length === 0
? <div>Nothing to show.</div>
: <TableWithRecords />
}
在 Angular 中，我会做这样的“事情”...
@if (data.length === 0) {
<div>Nothing to show.</div>
} @else {
<TableWithRecords />
}
简单来说，我有两种情况。
<h2>No Data Showing</h2> <ul> <li class="handle-no-data">Nothing to show.</li> <!-- <li>Data here</li> --> </ul> <h2>Data Showing</h2> <ul> <li class="handle-no-data">Nothing to show.</li> <li>Data here</li> </ul>
使用简单的 CSS 类 .single ...
.handle-no-data:not(:only-child) {
display: none;
}
.handle-no-data:only-child {
display: flex;
}
这个 CSS 可以简化为 ...
.handle-no-data {
&:not(:only-child) {
display: none;
}
&:only-child {
display: flex;
}
}
这是上面代码的结果...
如您所见，我必须将数据处理移至表级别，但 CSS 非常直接地处理“无数据”场景。
这太令人兴奋了！
以上是CSS&# 独生子而不是条件逻辑的详细内容。更多信息请关注PHP中文网其他相关文章！
