CSS實現上下鍵切換數字功能，是網頁開發中常見的需求。下面我們來看一下如何實現。

html:
<div class="number">1</div>
css:
.number {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 30px;
border: 1px solid #ccc;
}
.number:focus {
outline: none;
}

上述代碼是一個數字盒子，當我們點擊數字盒子時，它會獲得焦點，樣式變為藍色邊框。但這時還不能通過上下鍵切換數字。

接下來，我們用JavaScript來完成這一功能。

let number = document.querySelector('.number');
window.addEventListener('keydown', function(e) {
let key = e.keyCode;
let n = Number(number.innerText);
if (key === 38) {
number.innerText = n + 1;
} else if (key === 40) {
number.innerText = n - 1;
}
});

上述代碼實現了監聽鍵盤事件，當按下上下鍵時，數字盒子中的數字會隨之改變。

最后，我們來做一些樣式優化：

.number:focus {
outline: none;
background-color: #f0f0f0;
}
.number:hover {
background-color: #f5f5f5;
}

上述代碼實現了數字盒子的聚焦和懸停狀態下的背景色變化，讓交互更加友好。

到此為止，上下鍵切換數字的功能就完成了。如果你有其他的調整或更好的實現方式，歡迎在下方評論區與我們分享。