在購物網站中，很多情況下我們需要通過按鈕來增加或減少購物車中的商品數量。這時，就可以利用 CSS 來編寫相應的樣式實現該功能。

/* 定義按鈕樣式 */
.btn {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #ccc;
cursor: pointer;
}
/* 禁用按鈕樣式 */
.btn-disabled {
border-color: #eee;
color: #eee;
cursor: not-allowed;
}
/* 數量框樣式 */
.quantity {
display: inline-block;
width: 80px;
height: 30px;
border: 1px solid #ccc;
position: relative;
}
/* 減少數量按鈕位置 */
.quantity .minus {
left: 0;
}
/* 增加數量按鈕位置 */
.quantity .plus {
right: 0;
}
/* 數量顯示框 */
.quantity .qty {
text-align: center;
position: absolute;
top: 0;
width: 100%;
height: 30px;
line-height: 30px;
}

接著，需要在 HTML 中添加相應的結構和事件處理函數。

<div class="quantity" id="quantity-1">
<div class="minus btn btn-disabled" onclick="minusQty('quantity-1');">−</div>
<div class="qty">1</div>
<div class="plus btn" onclick="addQty('quantity-1');">+</div>
</div>

其中，minusQty 和 addQty 分別是減少數量和增加數量的事件處理函數，代碼如下：

function minusQty(qtyID) {
var qtyEl = document.getElementById(qtyID).getElementsByClassName("qty")[0];
var qty = parseInt(qtyEl.innerHTML);
if (qty >1) {
qtyEl.innerHTML = qty - 1;
toggleBtnState(qtyID, qty - 1);
}
}
function addQty(qtyID) {
var qtyEl = document.getElementById(qtyID).getElementsByClassName("qty")[0];
var qty = parseInt(qtyEl.innerHTML);
qtyEl.innerHTML = qty + 1;
toggleBtnState(qtyID, qty + 1);
}
function toggleBtnState(qtyID, qty) {
var minusBtn = document.getElementById(qtyID).getElementsByClassName("minus")[0];
var plusBtn = document.getElementById(qtyID).getElementsByClassName("plus")[0];
if (qty == 1) {
minusBtn.classList.add("btn-disabled");
} else {
minusBtn.classList.remove("btn-disabled");
}
if (qty == 10) {
plusBtn.classList.add("btn-disabled");
} else {
plusBtn.classList.remove("btn-disabled");
}
}

最后的效果就是一個長度為 80 像素、高度為 30 像素、帶有減少和增加按鈕的數量框，可以通過按鈕實現加減商品數量的功能。當數量為 1 時，減少按鈕會禁用；當數量為 10 時，增加按鈕會禁用。