CSS&# 独生子而不是条件逻辑-css教程-PHP中文网

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

霞舞

发布： 2024-10-26 18:27:32

转载

751人浏览过

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

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

没有数据。
有数据。

<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 可以简化为 ...

思若B2B电子商务网站管理系统

思若B2B.Net电子商务网网站管理系统是一套仿阿里巴巴，慧聪360等网站的互联网网站管理系统，系统采用微软ASP.Net2.0开发，数据库采用微软SQLSERVER，同时支持ACCESS，SQL7.0，SQL2000，SQ2005。1、无人执守生成。生成静态HTML，现在大部分系统都生成HTML，而思若问答系统独创无人执守HTML文件生成。网站无人执守生成与其它系统不同在于，其它的系统需要打开生

查看详情

.handle-no-data {
  &:not(:only-child) {
    display: none;
  }
  &:only-child {
    display: flex;
  }
}

登录后复制

这是上面代码的结果...

CSS

立即学习“前端免费学习笔记（深入）”；

概括

如您所见，我必须将数据处理移至表级别，但 css 非常直接地处理“无数据”场景。

这太令人兴奋了！

以上就是CSS&# 独生子而不是条件逻辑的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css优雅降级是什么意思 css中rotate函数是什么 CSS中motion path模块的介绍 css中position常见的四个属性值 CSS兄弟选择器的两种类型