伪类选择器2

未匹配的标注

上节介绍了 a:linka: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 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~