首页 >web前端 >css教程 >CSS中a:active的作用以及使用详解

CSS中a:active的作用以及使用详解

黄舟
黄舟原创
2017-07-19 16:53:4816901浏览

CSS :active 选择器

定义和用法

  :active 选择器用于选择活动链接。

  当您在一个链接上点击时,它就会成为活动的(激活的)。

  提示:请使用 :link 选择器对指向未被访问页面的链接设置样式,:visited 用于设置指向已访问页面的链接的样式,:hover 选择器用于设置鼠标指针浮动到链接上时的样式。

例子 1  选择未访问、已访问、悬浮和活动链接,并设置它们的样式:

a:link{color:blue;}
a:visited{color:blue;}
a:hover{color:red;}
a:active{color:yellow;}

例子 2   为链接设置不同的样式:

a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}

定义链接在鼠标被激活(点下去)时候的样式。链接伪类共有四个:
a:link 链接正常样式a:visited 链接访问过的样式a:hover 链接高亮(鼠标放到上面)的样式a:active 链接激活时的样式

示例:

<!DOCTYPE html>
<html>
<head>
<style>
a:active
{
background-color:yellow;
}
</style>
</head>
<body>

<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>

<p><b>注释:</b>:active 选择器为活动的链接设置样式。</p>

</body>
</html>

结果为:W3Sschool Google Wikipedia
注释::active 选择器为活动的链接设置样式。
定义链接在鼠标被激活(点下去)时候的样式。链接伪类共有四个:
a:link 链接正常样式a:visited 链接访问过的样式a:hover 链接高亮(鼠标放到上面)的样式a:active 链接激活时的样式

以上是CSS中a:active的作用以及使用详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn