用户投稿Pseudo-Classes 伪类 (虚拟类别)
有别于我们之前提到的 Class 有点像我们自定义将元素分组，伪类是依照该元素的特殊状态进行分类，并以 : 为前缀符号在 CSS 中进行选择，例如 a:visited{} 是指使用者已点选过的 a 标籤。在伪类选择器中有很多不同的特殊状态，而这些状态又依性质分为动态伪类、目标伪类、语言伪类等等，接下来就让我们一一介绍吧！
伪类的写法为
选择器:伪类，:符号与伪类间不可空格，且伪类不可单独存在，必须与其他选择器一起使用
Dynamic Pseudo-Classes 动态伪类
动态伪类是指透过使用者与网页互动的状态而产生的伪类类别，例如滑鼠移动到某元素时，该元素会拥有 hover 这个伪类。
:link未访问过的连结超连结未被访问时的颜色只能用于 a 连结相关元素:visited已访问过的连结已访问的连结呈灰色只能用于 a 连结相关元素:hover滑鼠悬在至元素上时滑鼠滑过按钮或超连结的效果可用于所有元素:active点该击元素时点击时的效果可用于所有元素:focus该元素被 focus 时表单元素拥有焦点时的效果只能用于表单输入类元素语法：
a:link { /* 未点过的 a 标籤连结 */ 属性名: 属性值;}a:visited { /* 已点过的 a 标籤连结 */ 属性名: 属性值;}a:hover { /* 滑鼠停在 a 元素上方时 */ 属性名: 属性值;}a:active { /* 滑鼠点击 a 元素时 */ 属性名: 属性值;}a:focus { { /* 网页焦点在 a 元素时 */ 属性名: 属性值;}範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> a:link { color: blue; } a:visited { color: gray; } a:hover { color: green; } a:active { color: red; } </style> </head> <body> <a href="https://tw.news.yahoo.com/">看新闻</a> </body></html>在这个範例中，使用者的行为造成元素伪类发生改变：
页面刚载入时连结没有被点过，此时只有:link 状态
滑鼠移动到 <a> 上，元素同时拥有 :link 及 :hover 状态
点选 <a> 但未放开，触发 :active，同时拥有 :link、:hover、:active 状态
放开滑鼠，等待页面跳转，此时拥有 :link、:hover 状态
页面跳转成功返回页面，连结已被点过，变为 :visited 状态
在使用动态伪类时因为经常出现某同时拥有多种状态的情况(如上範例)，所以我们需要特别注意 CSS 中样式的先后顺序，避免出现冲突。
在动态伪类中，若需要同时设定多个样式，建议以
:link、:visited、:hover、:active为顺序
範例 ( :focus )：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> input:focus { background-color: yellowgreen; } </style> </head> <body> <h3>很多 input 框</h3> <input type="text"><br/><br/> <input type="text"><br/><br/> <input type="text"> </body></html>上一篇：[快速入门前端 12] CSS 选择器 (2) 複合选择器 — 后代选择器及兄弟选择器
下一篇：[快速入门前端 14] CSS 选择器 (4) Pseudo-Classes 伪类 - 结构伪类
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
