如何通過CSS動態列表在項目列表之間添加逗號

假設您有一個項目列表，例如水果：香蕉、蘋果、橙子、梨、油桃。

我們可以直接在HTML中添加逗號(,)，但讓我們看看如何在CSS中實現，這能給我們帶來更多控制。同時，我們還要確保最後一個項目沒有逗號。

我最近在一個實際項目中需要這個功能，部分需求是列表中的任何項目都可以通過JavaScript隱藏/顯示。無論當前顯示哪些項目，逗號都需要正確顯示。

我發現一個相當優雅的解決方案是使用通用同級組合器。我們稍後再討論這個。讓我們先從一些示例HTML開始。假設您從一個水果列表開始：

<code></code>

• 香蕉
• 蘋果
• 橘子
• 梨
• 油桃

以及一些基本的CSS使其顯示為列表：

 .fruits {
  display: flex;
  padding-inline-start: 0;
  list-style: none;
}

.fruit {
  display: none; /* 默認隱藏*/
} 
.fruit.on { /* JavaScript添加的類，用於顯示列表項*/
  display: inline-block;
}

現在，假設在這個界面內部發生了一些事情，例如用戶切換控件以過濾掉所有在寒冷氣候下生長的水果。現在顯示的是不同的水果集，因此fruit.on類使用classList API進行操作。

到目前為止，我們的HTML和CSS將創建一個這樣的列表：

<code>香蕉橙子油桃</code>

現在，我們可以使用通用同級組合器在任意兩個on元素之間添加逗號和空格：

 .fruit.on ~ .fruit.on::before {
  content: ', '; 
}

不錯！

您可能會想：為什麼不直接將逗號應用於所有列表項，然後使用類似:last-child或:last-of-type從最後一個項中刪除它呢？這樣做的問題是，最後一個子元素在任何給定時間都可能處於“關閉”狀態。因此，我們真正想要的是最後一個處於“打開”狀態的項目，這在CSS中不容易實現，因為沒有類似“last of class”的東西可用。因此，使用了通用同級組合器技巧！

在UI中，我使用了max-width而不是display，並在0和一個合理的最大值之間切換它，這樣我就可以使用過渡來更自然地顯示和隱藏項目，讓用戶更容易看到哪些項目正在添加到列表中或從列表中刪除。您也可以將相同的效果添加到偽元素中，使其超級流暢。

這裡有一個演示，其中包含幾個略微不同的示例。水果示例使用隱藏類而不是on類，而蔬菜示例具有動畫效果。這裡還使用了SCSS進行嵌套：

我希望這能幫助其他尋找類似解決方案的人！

以上是如何通過CSS動態列表在項目列表之間添加逗號的詳細內容。更多資訊請關注PHP中文網其他相關文章！