百科狗-知识改变命运!
--

:active - 被激活时 - css 动态伪类选择器

乐乐1年前 (2023-11-21)阅读数 19#技术干货
文章标签链接

:active

定义和用法

  • :active,匹配激活元素。当你点击一个链接时它变成活动链接。最常见的示例是单击HTML文档中的超链接:当按住鼠标按钮时,链接处于活动状态。
  • :active,是一个伪类选择器,它适用于被激活的元素。:link选择器设置了未访问过的页面链接样式,:visited选择器设置访问过的页面链接的样式,:hover选择器当有鼠标悬停在其上的链接样式。
  • 为了产生预期的效果,在CSS定义中,:active必须位于:hover之后!

语法:

E:active{sRules}

:activeCSS伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。:active伪类通常用来匹配 tab 键交互。通常用于但并不限于HTML元素。

:active - 被激活时 - css 动态伪类选择器

这个样式可能会被后声明的其他链接相关的伪类覆盖,这些伪类包括:link:hover:visited。为了正常加上样式,需要把:active的样式放在所有链接相关的样式后,这种链接伪类先后顺序被称为LVHA顺序::link:visited:hover:active。

注意:在有多键鼠标的系统中,CSS 3 规定:active伪类必须只匹配主按键;对于右手操作鼠标来说就是左键。
  • 如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问。这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现
  • 超链接的4种状态,需要有特定的书写顺序才能生效。超链接状态顺序::link:visited:hover:active注意:hover必须位于:link:visited之后,:active必须位于:hover之后

浏览器支持

对所有元素IE8以及新版本浏览器均支持:active选择器。:active选择器对于IE7只支持链接。

示例

//选择激活的链接样式:

a:active
{
  background-color:yellow;
} 
//HTML 

:active css选择器示例

这个链接在鼠标按下和松开的这段时间内会变成绿色: CSS3.

//CSS body { background-color: #ffffc9 } a:link { color: blue } /* 未访问链接 */ a:visited { color: purple } /* 已访问链接 */ a:hover { font-weight: bold } /* 用户鼠标悬停 */ a:active { color: lime } /* 激活链接 */

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)