CSS&# 独生子而不是条件逻辑

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS 独生子而不是条件逻辑》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

在我使用的许多前端框架中，都有将三元组或 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 />
}

使用css

简单来说，我有两种情况。

1. 没有数据。
2. 有数据。

<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 独生子而不是条件逻辑》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！