超链接标签的CSS伪类

82938 阅读 0 评论 0 点赞

由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

CSS伪类，是一种特殊的类，它针对到CSS选择器起作用，使选中的标签或元素产生特定的效果。

CSS伪类的语法就是：选择器 : 伪类名 { 属性 : 属性值 }

用的最多的伪类就是超链接a的伪类，链接是网站的重要组成部分，几乎在每个网页上都能看到不少的链接，合理的设计链接的样式能够给网页的颜值加分。链接有四种不同的状态，分别是 link、visited、active 和 hover，可以通过以下伪类选择器来为链接的四种状态设置不同的样式：

:link：定义未访问链接的样式；

:visited：定义已经访问过链接的样式；

:hover：定义当鼠标经过或悬停在链接上时的样式；

:active：定义点击链接时的样式。

举例：

<html>
<head>
</head>
<body >
    <a>没有href的a标签,字体没有修饰，鼠标放上去也没反应</a> </br>
        <a href="#" target="_blank"> href为#的a标签，默认蓝色，带下划线，鼠标放上去变成手 </a> </br>
        <a href="https://www.dotcpp.com/" target="_blank" >href为网址的a标签，效果同上</a>
</body>
</html>

运行结果：

CSS伪类

（1）:link

说明：设置a对象在未被访问前的样式表属性。

举例：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
    </style>
</head>
<body>
    <a href=''>第一个链接</a>
    <a href=''>第二个链接</a>
</body>
</html>

运行结果：

:link

（2）:visited

说明：设置a对象在其链接地址已被访问过时的样式表属性。

举例：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px soild red;
            color: red;
        }
    </style>
</head>
<body>
    <a href=''>第一个链接</a>
    <a href=''>第二个链接</a>
</body>
</html>

运行结果：

:visited

（3）:hover

说明：设置对象在其鼠标悬停时的样式表属性。

举例：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
    </style>
</head>
<body>
    <a href=''>第一个链接</a>
    <a href=''>第二个链接</a>
</body>
</html>

运行结果： :hover

（4）:active

说明：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。

举例：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
        a:active {
            background: #000;
            border: 1px solid black;
            color: white;
        }
    </style>
</head>
<body>
    <a href=''>第一个链接</a>
    <a href=''>第二个链接</a>
</body>
</html>

运行结果：

:active