10、CSS 选择器与字体排版：打造精美网页的关键

CSS 选择器与字体排版：打造精美网页的关键

1. CSS 选择器中的伪类与伪元素

1.1 伪类的应用

伪类能够基于特定状态或情形扩展 CSS 语句选择 HTML 元素的能力。常见的伪类使用场景之一是检测和设置由锚元素创建的链接的不同状态。例如：

a:link    { color: blue;   }
a:hover   { color: green;  }
a:active  { color: red;    }
a:visited { color: purple; }

上述代码分别设置了链接的正常状态、鼠标悬停状态、活动状态（鼠标悬停并按下按钮）以及已访问状态的颜色。由于这四种链接状态相互排斥且涵盖了超文本链接的所有可能状态，通常无需指定链接状态，如 a { color: blue; } 与 a:link { color: blue; } 效果相同。现代浏览器允许所有元素具有悬停状态，不过目前 Internet Explorer 6 是唯一仅识别锚元素悬停状态的主流浏览器。

此外， focus 伪类用于选择获得焦点的元素，常应用于输入框和其他表单元素。当用户的光标位于元素内并可从键盘输入文本时，以下 CSS 语句会为当前获得键盘焦点的文本输入元素设置浅黄色背景：

input[type="text"]:focus { background-color: #ffff99; }