您现在的位置:首页 >> 前端 >> 内容

伪类选择器的作用及用法示例

时间:2018/5/15 13:40:56 点击:

  核心提示:作用根据连接的不同状态可以以不同的方式显示;伪类是CSS 用于向某些选择器添加特殊的效果。a标签中有四个:link、visited、hover、active用法示例:a:link{color:#FF0...

作用根据连接的不同状态可以以不同的方式显示;

伪类是CSS 用于向某些选择器添加特殊的效果。

a标签中有四个:link、visited、hover、active

用法示例:

a:link{color:#FF0000}     -----未访问的连接(颜色可以自定义)

a:visited                         -----已访问的连接

hover                         -----鼠标移动到连接上时显示的效果

a:actice                          -----选定的的连接

注意:书写的顺序必须按照以下顺序,

a:link、a:visited、a:hover、a:active

再加上一些特殊效果的样式

更炫的超链接效果(字体变色、字体变大、出现背景色、出现下划线)

a.one:link {color: #ff0000}  
a.one:visited {color: #0000ff}  
a.one:hover {color: #ffcc00}  
a.two:link {color: #ff0000}  
a.two:visited {color: #0000ff}  
a.two:hover {font-size: 150%}  
a.three:link {color: #ff0000}  
a.three:visited {color: #0000ff}  
a.three:hover {background: #66ff66}  
a.five:link {color: #ff0000; text-decoration: none}  
a.five:visited {color: #0000ff; text-decoration: none}  
a.five:hover {text-decoration: underline} 

作者:网络 来源:sashahu的博客