• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS :active 伪类 元素被激活时的样式

CSS :active 伪类 元素被激活时的样式

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含active,元素被激活时的样式等相关知识,佚名 希望在学习及工作中可以帮助到您
:active -- CSS :active 伪类,适用于一个元素被激活时的样式

语法: :active
CSS版本:CSS1

说明:
适用于一个元素被激活时的样式,例如鼠标在此元素的区域内按下但还没有释放时
客户端(浏览器)可以根据用户与其交互的动作改变其渲染效果,CSS为这种情况提供了三个伪类:hover、active、focus
上述三种伪类不是互斥的,一个元素同时可以适用其中的若干个
:active伪类,适用于一个元素被用户激活时,例如用户在按下鼠标之后放开鼠标之前的这一段时间内。当用户放开鼠标后,恢复元素原有的样式
active,中文"激活、活跃"的意思

语法


  1. a:active   
  2. {   
  3.     color:yellow;   
  4.     background:blue;   
  5.     font-size:small;   
  6. }   
  7. p:active   
  8. {   
  9.     color:yellow;   
  10.     background:blue;   
  11.     font-size:large;   
  12. }   
  13. div:active   
  14. {   
  15.     color:red;   
  16.     background:lime;   
  17.     font-size:small;   
  18. }  
查看演示:http://demo.jb51.net/js/2015/css_active/demo1.htm

伪类选择符的顺序:L-V-H-A

CSS提供了四种元素设置链接的颜色,包括:link、:visited、:hover、:active,它们的声明是有一定顺序的,我们简称这种顺序为L-V-H-A,即link最先,其次visited,之后hover,最后active,如此声明才能保证hover与active状态显示正确的样式

示例
统一定义链接各种状态下的样式

  1. a:link   
  2. {   
  3.     color:red;   
  4. }   
  5. a:visited   
  6. {   
  7.     color:green;   
  8. }   
  9. a:hover    
  10. {   
  11.     color:yellow;   
  12.     background:blue;   
  13. }   
  14. a:active    
  15. {   
  16.     color:lime;   
  17.     background:red;   
  18. }   
演示效果:http://demo.jb51.net/js/2015/css_active/demo2.htm

一个页面可以定义多个链接样式
可以在一个页面定义多种链接样式,例如下面示例定义了灰色与白色两种样式的连接

  1. .gray:hover,.gray:focus,.gray:active,.gray:link,.gray:visited   
  2. {   
  3.     color:#999;   
  4. }   
  5.   
  6. .white:hover,.white:focus,.white:active,.white:link,.white:visited   
  7. {   
  8.     color:#000;   
  9.     font-weight:bold;   
  10. }  

演示页面:http://demo.jb51.net/js/2015/css_active/demo3.htm

IE浏览器不支持A元素以外的其它元素的:active伪类
IE6、IE7(Q)、IE8(Q)浏览器不支持A元素以外的其它元素的:active伪类,可通过示例一测试

浏览器兼容性

CSS E:active 伪类浏览器兼容性
选择符 I

您可能想查找下面的文章:

  • 移动端网页解决CSS的active伪类无效的方法
  • CSS :active 伪类 元素被激活时的样式
  • csshover.htc在IE7下使用:active伪类无效解决方法
  • 在CSS中定义a:link、a:visited、a:hover、a:active正确顺序

相关文章

  • 2017-08-06CSS3制作缩略图的详细过程
  • 2017-08-06padding盒子内部文字跟盒子之间的距离
  • 2017-08-06CSS3 animation实现逐帧动画效果
  • 2017-08-06CSS设置多行文本垂直居中的方法
  • 2017-08-06浅谈CSS在前端优化中一些值得注意的关键点
  • 2017-08-06利用CSS3实现气泡效果的教程
  • 2017-08-06带有css3动画效果的兼容多浏览器简单导航条示例
  • 2017-08-06select和input不会继承字号body font-size
  • 2017-08-06css margin:0 auto居中
  • 2017-08-06CSS3 制作旋转的大风车(充满童年回忆)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 利用CSS3实现折角效果实例源码
    • 如何利用CSS3制作3D效果文字具体实现样式
    • css 不兼容性问题小结
    • css3 2D图片转动样式可以扩充到Js当中
    • 重置浏览器默认样式
    • css 设置全屏背景图片
    • css 半透明 让IE6支持png图片半透明解决方法
    • css盒模型和块级、行内元素深入理解
    • 深入解析CSS中z-index属性对层叠顺序的处理
    • 请保留超链接的outline属性

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有