:FOCUS 是 準類別 中的動態準類別，當 INPUT 元素或 ANCHOR 元素被聚焦時，會應用此設計的風格。可以用滑鼠點選，或用 TAB 輪選元素而聚焦。:focus 用在 TAB 輪選的效果最明顯，筆者就常遇到 TAB 失蹤的情形。
- 風格用法：
<style type='text/css'>
.key:focus {background:green;
color: red;
font-size: 120%;
width: 300px
}
</style>
<p>TEXT：<input class='key' value='滑鼠點此' />
<p>BUTTON：<input class='key' type=button value='滑鼠點此' />
<p>CHECKBOX：<input class='key' type=checkbox />
<p>FILE：<input class='key' type=file />
<p>IMAGE：<input class='key' type=image
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisusG9Gxvhb9HT3WDSKFsiW_cEXy1nTaztMKzvjoq8hhXesJiyqD2aABdrIwLSTjLnGQprkM3tmU7ywgAqdlWajZIDPnxLV3sDB23pJAY7xpHdoCUZ9i-tRWRnjYidYBivnoCmjxkB62yg/s200/ant.GIF" />
<p>PASSWORD：<input class='key' type=password />
<p>RADIO：<input class='key' type=radio />
<p>RESET：<input class='key' type=reset value='滑鼠點此' />
<p>SUBMIT：<input class='key' type=submit value='滑鼠點此' />
<p>ANCHOR：<a class='key' href='javascript:void(0)'>滑鼠點此</a> - 執行結果：
TEXT：
BUTTON：
CHECKBOX：
FILE：
IMAGE：
PASSWORD：
RADIO：
RESET：
SUBMIT：
ANCHOR：滑鼠點此
- IE6 沒有支援 :focus。Firefox 除了 FILE 都可以用。Safari, Chrome 有兩種情形：（一）使用滑鼠點選，只能用在 TEXT 與 PASSWORD。（二）使用 TAB 輪選，則都可以選；而 Chrome 可選 ANCHOR 元素 ，Safari 則不能。狀況蠻多的，使用時最好多測試。
- 在 Safari, Chrome 中，RADIO 不能用 TAB 選；Firefox 則可以。
將 :focus 狀態傳給子元素。只能用在 BUTTON 元素。
- 風格用法：
<style type='text/css'>
.btn {border:solid 1px red}
.btn:focus {background:blue}
.btn:focus SPAN {background:white; color:red}
</style>
<button class=btn>遊戲樂園
<span>好玩遊戲，射擊遊戲，賽車遊戲。</span>
</button> - 執行結果：
- 上例，Firefox 成功；IE6, Safari, Chrome 失敗。Safari, Chrome 不能在 BUTTON 元素使用 :focus。
| focus（你正在看 第一頁） | : | 第一頁 | 第二頁 |
