16.5. CSS :focus 伪类

:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式
  • 语法: :focus
  • CSS版本:CSS2
  • 引用网址:http://www.dreamdu.com/css/pseudo-class_focus/
  • 说明:
    • 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字时、接受键盘事件时
    • 客户端(浏览器)可以根据用户与其交互的动作改变其渲染效果,CSS为这种情况提供了三个伪类:hoveractivefocus
    • 上述三种伪类不是互斥的,一个元素同时可以适用其中的若干个
    • :focus伪类,适用于已获取焦点的元素的样式。当一个元素获取焦点时,证明它是可控制的,例如一个链接获取了焦点后可以通过按"回车"键激活链接。可以用键盘的Tab键的遍历页面中可以获取焦点的元素,可以参考HTML中的tabindex属性。如果虚线框环绕了一个链接元素,证明此链接元素获取了焦点
  • focus,中文"焦点"的意思

语法

:focus
a:focus
a.class:focus

示例

a:focus
{
	color:lime;
	background:red;
}

input:focus
{
	color:yellow;
	background:blue;
}

CSS :focus 伪类示例 -- 可以尝试编辑

IE浏览器不支持:focus伪类

IE6、IE7、IE8(Q)浏览器不支持:focus伪类,可通过上面示例测试

浏览器兼容性

CSS E:focus 伪类浏览器兼容性
选择符 IE6 IE7 IE8 IE9 FF CH OP SA
E:focus no no part yes yes yes yes yes

参考



  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都