CSS 購物車加減功能使得網站購物體驗更加流暢和方便，下面是如何使用 CSS 實現購物車加減功能的簡單介紹。

.cart {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart button {
background-color: #4169E1;
color: #ffffff;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 18px;
cursor: pointer;
}
.cart .quantity {
font-size: 18px;
font-weight: 500;
text-align: center;
}
.cart .quantity-value {
font-size: 18px;
font-weight: 500;
margin: 0 10px;
}

在上面的 CSS 代碼中，我們定義了一個購物車div.cart，其中包含加減按鈕和數量顯示。按鈕的樣式由button定義，數量的樣式由.quantity-value定義。

讓我們看一下HTML，它如何使用這個 CSS 樣式：

-
1
+

在這個例子中，我們用到了 JavaScript 來實現購物車數量的加減。讓我們看一下JavaScript代碼：

var decreaseButton = document.getElementById("decrease");
var increaseButton = document.getElementById("increase");
var quantity = document.querySelector(".quantity-value");
var count = 1;
decreaseButton.addEventListener("click", function() {
count--;
quantity.innerHTML = count;
});
increaseButton.addEventListener("click", function() {
count++;
quantity.innerHTML = count;
});

代碼分別獲取減少和增加按鈕以及數量顯示，然后在按鈕點擊時更改數量并設置新的值。

這就是 CSS 購物車加減功能的簡單實現。為了添加保護措施，我們需要加入對輸入值的驗證和數量的最小和最大值的限制。