資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 動態地在專案列表之間新增逗號？
網站上經常使用包含多個專案的列表，用逗號分隔它們可以增強可讀性和使用者體驗。新增逗號到列表的傳統方法是手動新增。但是，正如您可能已經猜到的那樣，這可能是一個繁瑣且耗時的過程，特別是對於長列表而言。幸運的是，使用 CSS 動態地將逗號新增到專案列表中是一個極好的解決方案。
~ 選擇器
CSS 中的 ~ 選擇器用於選擇 HTML DOM 中所有在所需元素之前的元素。
語法
el1~el2 {
css declarations
}
在此上下文中，“el1”象徵著後續元件的前置元件，而“el2”則代表位於共享父級單元中的後續同級元件。
例如，a ~ ul 選擇每個在 <a> 元素之前的 <ul> 元素。
::before 選擇器
::before 選擇器用於在選定元素之前插入一些內容。
語法
el::before {
css declarations
}
這裡，el 是將應用 ::before 偽元素的元素。::before 偽元素前面有兩個冒號 (::)，以將其與 :before 偽類區分開來，後者是仍然支援向後相容的舊語法。
例如，p::before 將在 <p> 元素之前新增內容。
方法
使用 CSS 動態地在專案列表之間新增逗號的方法涉及使用稱為 ::before 的偽元素，該偽元素可以在選定元素之前插入內容。在這種情況下，我們針對 ul 列表中的 li 元素，並使用 ::before 選擇器在每個元素之前新增逗號。此方法使我們能夠避免手動將逗號新增到列表中，並使用 CSS 自動執行此過程。此外，我們可以使用 display 和 flex-wrap 屬性來排列列表項，並在必要時確保它們換行。最後，我們可以使用 JavaScript 動態地新增和刪除列表項。
示例
以下程式碼使用 CSS 動態地在專案列表之間新增逗號。文件包括一個標題、帶有 CSS 屬性的樣式標籤以及一個包含標題、具有“item”類名的專案列表以及用於新增和刪除專案的兩個按鈕的 div 標籤。樣式標籤包含一個偽元素選擇器，該選擇器在除了第一個列表項之外的每個列表項之前新增逗號和空格。指令碼標籤定義了兩個函式；addItem 函式新增一個新的列表項，其文字為“Item！”，而 removeItem 函式隨機選擇一個列表項並將其刪除。
<!DOCTYPE html>
<html>
<head>
<style>
.items {
display: flex;
list-style: none;
padding: 0;
flex-wrap: wrap
}
.item~.item::before {
content: ", ";
}
</style>
</head>
<body>
<h4>How to Add Commas Between a List of Items Dynamically with CSS?</h4>
<div>
<ul class="items">
<li class="item">Eggs</li>
<li class="item">Bread</li>
</ul>
</div>
<div>
<button onclick="addItem()">Add Item</button>
<button onclick="removeItem()">Remove Item</button>
</div>
<script>
function removeItem(){
let items=document.querySelectorAll('.item');
let idx=Math.floor(Math.random()*items.length);
items[idx].remove();
}
function addItem(){
let itemList=document.querySelector(".items");
let item=document.createElement("li");
item.innerText="Item!";
item.className="item";
itemList.append(item);
}
</script>
</body>
</html>
結論
總而言之，利用 CSS 在一系列文章中動態包含逗號是一種巧妙的策略，能夠增強網頁的可讀性和視覺吸引力。透過利用 CSS 鮮為人知的技能，網頁設計師可以獲得針對看似微不足道的問題的複雜解決方案。透過發揮想象力和探索新可能性的渴望，您可以利用 CSS 的強大功能來建立引人入勝且美觀絕倫的網頁設計，給您的觀眾留下持久的影響。因此，不要猶豫，嘗試使用您掌握的各種工具和技術，並釋放您 Web 開發專業知識的全部潛力。
976 次瀏覽
