CSS樣式在網頁設計中起到了至關重要的作用，它不僅可以讓頁面變得美觀有序，同時也可以讓頁面變得更加實用。當我們需要在商品頁面中添加數量選擇功能的時候，CSS樣式也將發揮著重要的作用。

/* 添加商品數量選擇樣式 */
.product-quantity {
display: flex;
align-items: center;
justify-content: space-between;
width: 120px;
}
.product-quantity__input {
width: 30px;
height: 30px;
font-size: 16px;
text-align: center;
border: none;
border-radius: 3px;
}
.product-quantity__btn {
font-size: 25px;
border: none;
background-color: transparent;
cursor: pointer;
}

在上述代碼中，我們通過創建一個類名為.product-quantity的元素來控制數量選擇框的樣式。通過使用flex布局，我們使數量選擇框中的輸入框和加減按鈕呈現出了水平對齊的狀態，并且通過設置其justify-content值為space-between，我們將兩個元素分別排在了左、右兩側。

接下來，我們分別對輸入框和加減按鈕進行了樣式設置。我們將輸入框的寬度和高度設定為30px，并設置其字體大小為16px，讓用戶可以更清晰的看到輸入框內的數字。另外，我們設置了其邊框為none，這也是為了優化用戶體驗。我們將加減按鈕的字體大小設定為25px，并將其背景色設置為transparent，使其呈現出沒有任何背景色的狀態。同時，我們還設置了按鈕的cursor為pointer，這樣當用戶將鼠標移至按鈕上時，將會出現手型的樣式，提示用戶這是可以點擊的。

通過以上的CSS樣式設置，我們可以讓商品數量選擇框呈現出美觀實用的狀態，既可以讓用戶清晰地看到商品數量的變化，也可以讓用戶在選擇數量時更加簡單方便。