CSS里的a:active 是干什么用的,请举例说明

html-css018

CSS里的a:active 是干什么用的,请举例说明,第1张

定义链接在鼠标被激活(点下去)时候的样式。操作方法如下:

1、新建一个html文件,命名为test.html,a标签四个不同的伪类,有不同的效果。

2、利用a标签伪类改变字体的颜色。下面代码实现了a标签的默认颜色为红色,点击链接过后,颜色变为绿色,当鼠标放在连接上显示粉红色。

3、利用a标签伪类改变字体的大小。下面代码实现了a标签的默认大小为20px,点击链接过后,大小变为40px。

4、利用a标签伪类改变链接的背景颜色。下面代码实现了a标签的默认背景颜色为红色,点击链接过后,背景颜色变为绿色。

5、利用a标签伪类改变链接的字体。下面代码实现了a标签的默认字体为Monospace,点击链接过后,字体变为Arial。

6、最后利用a标签伪类去掉连接默认的下划线。下面代码实现了a标签在任何状态下都没有下划线。

class说明是一个类,class=“active”本身这句是html代码,如果在css里设置样式应该在类名前加个点,如.active{},从经验看,active这个类一般用在导航条中当前高亮的栏目,或者选项卡中当前活动着的选项

li:active { display:inline-blockwidth:100pxheight:30pxbackground:#06b2e3color:#fff}/* display是一定要加上的,不然背景显示会有问题,width和height的具体值你自己写*/

不过这只是鼠标释放以后的才会显示的样式。

我猜想你是想鼠标划过时才这样显示,你应该这样写

li:hover { display:inline-blockwidth:100pxheight:30pxbackground:#06b2e3color:#fff}

实际上,要想更多浏览器都兼容这个样式,你应该给<a></a>加伪类。而且伪类的书写时有顺序的,如下所示分别是 link, visited, hover, active. 并且这些伪类都要书写,一个都不能遗漏

a:link{color:black}/*没有访问之前的样式*/

a:visited{color:blue} /*访问之后的样式*/

a:hover{color:red}/*鼠标滑过时的样式*/

a:active{color:green} /*鼠标释放时候的样式*/

希望能帮到你。