:focus選擇器被用來指定“表單元素”獲得光標焦點時使用的樣式，主要在單行文本框text、多行文本框textarea等表單元素獲得焦點並輸入文本時使用。
一般情況下，獲取焦點和失去焦點是針對單行文本框text、多行文本框textarea這2個表單元素而言。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :focus選擇器</title>
<style type="text/css">
input:focus
{
outline:1px solid red;
}
</style>
</head>
<body>
<p><label for="name">姓名：</label><input type="text" name="name"/></p>
<p><label for="email">郵箱：</label><input type="text" name="email"/></p>
</body>
</html>
在浏覽器預覽效果如下：
分析：
在這裡當文本框獲取焦點時，使用outline屬性為文本框添加一個紅色的外輪廓線，效果如下：
關於外輪廓線outline屬性，我們將在後面教程詳細給大家講解。