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&# 獨生子而不是條件邏輯的詳細內容。更多資訊請關注PHP中文網其他相關文章！