<div \> 聚焦 變色
<div \> 標簽是 HTML 中最常用的標簽之一，用于定義文檔中的一個分區或節（也稱為 “div” 或 “塊”）。通過使用 CSS（層疊樣式表），我們可以為 div 標簽設置各種樣式，包括背景色、文字顏色、寬度等。本文將介紹如何使用 div 和 CSS 實現聚焦時變色的效果。
在編寫代碼之前，需要了解兩個關鍵的 CSS 概念：“盒模型”和“偽類”。盒模型指的是一個 HTML 元素由內容區、填充區、邊框區和外邊距區組成。偽類是指一些選擇器，允許我們在特定狀態下選擇元素進行樣式設置。其中，“:focus” 是一個偽類，表示元素正在聚焦。
，讓我們看一個簡單的示例，當 <div \> 元素被聚焦時，改變其背景色為黃色。

<div id="myDiv" tabindex="0">
這是一個 div 元素。
</div>
<br>
<style>
#myDiv:focus {
background-color: yellow;
}
</style>

在上述代碼中，我們將 <div \> 元素的 id 設置為“myDiv”，并指定了“tabindex”屬性。這樣設置是為了使元素能夠獲得焦點。接下來，在 CSS 樣式中，我們使用了 :focus 偽類來定義當元素聚焦時的背景色為黃色。通過這段代碼，我們可以看到聚焦 <div \> 元素時，背景色會變為黃色。
接下來，我們將改變元素的文字顏色而不是背景色。下面是一個示例代碼：

<div id="myDiv" tabindex="0">
這是一個 div 元素。
</div>
<br>
<style>
#myDiv:focus {
color: red;
}
</style>

上述代碼中，我們使用了相同的 HTML 部分，但在 CSS 樣式中，將文字顏色更改為紅色?，F在，當我們聚焦 <div \> 元素時，文字顏色將變為紅色。
除了背景色和文字顏色之外，我們還可以改變元素的邊框樣式。以下是改變 <div \> 邊框樣式的示例代碼：

<div id="myDiv" tabindex="0">
這是一個 div 元素。
</div>
<br>
<style>
#myDiv:focus {
border: 2px solid blue;
}
</style>

上述代碼將聚焦 <div \> 元素時的邊框樣式設置為 2px 寬的藍色邊框。通過這個例子，我們可以看到當 <div \> 元素聚焦時，邊框會變成藍色。
起來，我們可以通過使用 div 和 CSS 實現聚焦時變色的效果。通過設置不同的屬性，如背景色、文字顏色和邊框樣式，可以創建各種聚焦時變色的效果。這不僅可以增加用戶體驗，還可以使頁面更具交互性和可訪問性。希望本文能夠幫助您理解如何使用 div 和 CSS 實現聚焦時變色的效果。