CSS :active 选择器
实例
选择活动链接,并设置其样式:
<!DOCTYPE html>
<html>
<head>
<style>
a:active {
background-color: yellow;
}
</style>
</head>
<body>
<a href="https://cankaoshouce.com">cankaoshouce.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<p><b>备注:</b> :active 选择器设置链接的样式。</p>
</body>
</html>
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
选择器 | |||||
---|---|---|---|---|---|
:active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
定义和用法
:active
选择器用于选择活动链接。
当您在一个链接上点击时,它就会成为活动的(激活的)。
提示:请使用 :link 选择器对指向未被访问页面的链接设置样式,:visited 用于设置指向已访问页面的链接的样式,:hover 选择器用于设置鼠标指针浮动到链接上时的样式。
备注:在 CSS 中,
:active
必须在定义 :hover
(如果存在) 的后面,以便生效!实例
选择未访问、已访问、悬浮和活动链接,并设置它们的样式:
<!DOCTYPE html>
<html>
<head>
<style>
a:active
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.cankaoshouce.com">cankaoshouce.com</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>注释:</b>:active 选择器为活动的链接设置样式。</p>
</body>
</html>
例子 2
为链接设置不同的样式:
<!DOCTYPE html>
<html>
<head>
<style>
a.ex1:hover, a.ex1:active {color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
</style>
</head>
<body>
<p>将鼠标移到链接上可以看到它们更改布局。</p>
<p><a class="ex1" href="/css/css-course.html">这链接改变颜色</a></p>
<p><a class="ex2" href="/css/css-course.html">这链接改变字体大小</a></p>
<p><a class="ex3" href="/css/css-course.html">这链接改变背景颜色</a></p>
<p><a class="ex4" href="/css/css-course.html">这链接改变字体</a></p>
<p><a class="ex5" href="/css/css-course.html">这链接改变文本装饰</a></p>
</body>
</html>
相关页面
CSS 教程:CSS 链接
CSS 教程:CSS 伪类