关闭

css链接link_CSS :link 伪类

时间: 2019-01-01阅读: 1057标签: 伪类

链接可以使用任何css属性,包括字体、颜色、背景等等、链接有四个状态,可在四个状态时设置不同的属性

a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻


当为链接的不同状态设置样式时,需要遵循a:hover 必须位于a:link 和a:visited之后,a:active 必须位于 a:hover 之后

例如编辑一个如下的html文件

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
        a:link {color:red;}      /* 未访问链接*/
        a:visited {color:green;background-color:gray}  /* 已访问链接 */
        a:hover {color:pink;font-size:20px}  /* 鼠标移动到链接上 */
        a:active {color:yellow;}  /* 鼠标点击时 */
    </style>
    </head>
    <body>
        <p><b><a href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p>
        <p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
        <p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
    </body>
</html>


初次点开时显示如下,将鼠标放在链接上显示粉色,并且字体变大;点击时显示黄色;点击之后显示绿色,并且背景为灰色



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1737

理解:before伪类搭配vertical-align:middle实现垂直居中的原理

总所周知,Css如何实现元素垂直居中?已经是一个老生常谈的问题了,这个问题目前已经有了许多解决方案,这些方案也都有各自适用的场景以及优缺点,大致如下:

css选择器优先级高低排列_css样式权重计算和!important属性

css的选择器是有权重(即优先级)的,在不同选择器的样式出现冲突时候,会采用权重高的选择器设置样式,而优先级不仅仅只是:“行间>内部>外部、ID>class>元素”。css优先级到底是怎么计算的呢?

css否定伪类:not(s)

:not(X)是CSS中的一个否定伪类(选择器),并且接受一个简单的选择器作为参数。本质上,可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。

CSS 的 :is()和 :where() 即将在浏览器中和大家见面

现在,Safari(技术预览版106)和Firefox(版本78)的预览版均支持新的CSS :is() 和 :where() 伪类。 Chrome的实施仍然落后。

深入理解CSS伪类

伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识

css获取除第一个之外的子元素

有时候我们需要用CSS选择非第一个子元素,例如下面这样的HTML,希望让两个span之间间隔一定的距离,但又不希望简单的给每个span设置margin-right(会导致最后一个span也有margin-right,可能影响之后元素的排版)。

善用CSS伪类,不用JS也能做出选项卡功能

本篇文章的技术给予选项卡UI另一种开发的选择,Radio button的特性还有很多应用可以做(如Switcher),只要善用HTML表单元素与CSS的一些技巧,也能玩出很多有趣的功能,甚至替代JavaScript的部份工作.

CSS3新增的伪类有哪些 与 居中div的多种方法

CSS3新增伪类有那些?p:first-of-type:选择属于其父元素的首个<p>元素,p:last-of-type:选择属于其父元素的最后<p>元素,p:only-of-type:属于父元素的特定类型的唯一子元素,p:only-child:属于父元素的唯一子元素的每个<p>元素;p:nth-child(2)

css伪类和伪元素

伪类和伪元素,对于绝大多数同学来说,都是耳熟能详的名字,但确实又有很多人搞不清楚它们之间的区别,以致于混淆概念。而当概念都混淆的时候,也往往意味着你不会经常使用它,怕出错,怕用不好

css中:visited怎么不起作用?

css定义超链接四个状态也是有顺序的,对于这4个伪类的设置,有一点需要特别注意,那就是它们的先后顺序,要让它们遵守一个顺序原则,也就是link ~ visited ~ hover ~ active 。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!