伪类选择器2

CSS 权威指南笔记 /

上节介绍了 a:link 和 a:visited，它们一般第一次显示之后，不会再改变文档的样式。此节介绍动态的伪类 :focus、:hover 和 :active 。

注意：动态伪类可以应用到任何元素（不只是a元素）。

`:focus`	当前可以接受键盘输入或者能已某种方式激活的元素
`:hover`	指示鼠标停留在哪个元素上
`:active`	被激活的元素

a:link {color:blue;}   /*未访问的a链接蓝色*/
a:visited {color:red;} /*已访问的a链接红色*/
a:focus {background:green;} /*获得焦点时背景绿色*/
a:hover {font-weight: bold;} /*鼠标停留时字体变粗*/
a:active {font-size:50px;} /*被激活时字体变大*/

伪类选择器2

伪类选择器2

伪类选择器2

伪类选择器2

a:focus 这里无法演示，因截屏时该元素会失去焦点。当鼠标按下时与 a:active 一起触发，变成大号文字绿色背景，当鼠标移开时，字体恢复原有大小，背景色仍然是绿色，当点击其他地方时，背景恢复白色。换为 input 元素演示下

input:focus { border:5px solid yellow;}

伪类选择器2

本文章首发在 LearnKu.com 网站上。

1.1k 声望

未知的世界只差向前一步

《L03 构架 API 服务器》

你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程，JWT 概念及使用和 API 开发相关的进阶知识。

《L02 从零构建论坛系统》

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

讨论数量: 0

发起讨论只看当前版本

暂无话题~