欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-02 11:00:30
作用根据连接的不同状态可以以不同的方式显示; 伪类是css 用于向某些选择器添加特殊的效果。 a标签中有四个:link、visited、hover、active 用法示例:...

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

伪类是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}