伪类link、hover、focus、visited、active区别

阅读原文

CSS伪类用于向某些选择器添加特殊的效果。

• :active 向被激活的元素添加样式。
• :focus 向拥有键盘输入焦点的元素添加样式。
• :hover 当鼠标悬浮在元素上方时，向元素添加样式。
• :link 向未被访问的链接添加样式。
• :visited 向已被访问的链接添加样式。

查看实例——走你

• 栗子1

/*css*/
a:link{
color: blue;
}
a:visited{
color: green;
}
a:hover{
color: red;
}
a:focus{
color:black;
}
a:active{
color: yellow;
}

click me

• 栗子2

/*css*/
input:focus{
background: yellow;
}
input:active{
background: red;
}

link：表示链接在正常情况下（即页面刚加载完成时）显示的颜色。
visited：表示链接被点击后显示的颜色。
hover：表示鼠标悬停时显示的颜色。
focus：表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用（鼠标松开时显示的颜色）。
active：表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。

伪类的顺序应为link--visited--hover--focus--active。

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:focus {color: #000000} /*使用Tab键把聚焦落在链接上*/
a:active {color: #0000FF}   /* 选定的链接 */

提示：

• 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
• 伪类名称对大小写不敏感。

把鼠标移到按钮并点击时，会产生一串什么样的事件？
active hove focus
foucs hove active
hover active foucus
hover focus active ****