CSS超链接伪类

2023-12-18 21:23:20

CSS超链接伪类

🩹一、什么是伪类

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

🫧静态伪类和动态伪类

静态伪类：只能用于超链接的样式。如下：

选择器说明
:link超链接点击之前
:visited链接被访问过之后

PS：以上两种样式，只能用于超链接。

动态伪类：针对所有标签都适用的样式。如下：

选择器说明
:hover“悬停”：鼠标放到标签上的时候
:active“激活”： 鼠标点击标签，但是不松手时。
:focus是某个标签获得焦点时的样式（比如某个输入框获得焦点）

PS：以上三种样式，只能用于超链接。

💊二、常用超链接伪类

a标签有4种伪类（即对应四种状态）如下：

伪类名称含义示例
:link“链接”：超链接点击之前a:link{color:#9ef5f9;}
:visited“访问过的”：链接被访问过之后a:visited {color:#333;}
:hover“悬停”：鼠标放到标签上的时候a:hover{color:#ff7300;}
:active“激活”： 鼠标点击标签，但是不松手时。a:active {color:#999;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

语法：

标签名:伪类名{声明;}

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .a1:link{
        background-color: pink;
    }
    .a2:visited{
        background-color: #a4ff46;
    }
    .a3:hover{
        background-color: orange;
    }
    .a4:active{
        background-color: fuchsia;
    }
    </style>
</head>
<body>
<a class="a1" href="#">未单击访问时超链接样式效果</a>
<br>
<a href="../ch02/homework.html" class="a2" target="_blank">单击访问后超链接样式效果</a>
<br>
<a class="a3" href="#">鼠标悬浮其上的超链接样式效果</a>
<br>
<a class="a4" href="#">鼠标单击未释放的超链接样式效果</a>
</body>
</html>

效果图：
在这里插入图片描述
拓展：
所有 CSS 伪类

选择器例子例子描述
:activea:active选择活动的链接。
:checkedinput:checked选择每个被选中的 < input> 元素。
:disabledinput:disabled选择每个被禁用的 < input> 元素。
:emptyp:empty选择没有子元素的每个 < p> 元素。
:enabledinput:enabled选择每个已启用的 < input> 元素。
:first-childp:first-child选择作为其父的首个子元素的每个 < p> 元素。
:first-of-typep:first-of-type选择作为其父的首个 < p> 元素的每个 < p> 元素。
:focusinput:focus选择获得焦点的 < input> 元素。
:hovera:hover选择鼠标悬停其上的链接。
:in-rangeinput:in-range选择具有指定范围内的值的 < input> 元素。
:invalidinput:invalid选择所有具有无效值的 < input> 元素。
:lang(language)p:lang(it)选择每个 lang 属性值以 “it” 开头的 < p> 元素。
:last-childp:last-child选择作为其父的最后一个子元素的每个 < p> 元素。
:last-of-typep:last-of-type选择作为其父的最后一个 < p> 元素的每个 < p> 元素。
:linka:link选择所有未被访问的链接。
:not(selector):not§选择每个非 < p> 元素的元素。
:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 < p> 元素。
:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个< p>元素，从最后一个子元素计数。
:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个< p>元素的每个< p>元素，从最后一个子元素计数
:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个 < p> 元素的每个 < p> 元素。
:only-of-typep:only-of-type选择作为其父的唯一 < p> 元素的每个 < p> 元素。
:only-childp:only-child选择作为其父的唯一子元素的 < p> 元素。
:optionalinput:optional选择不带 “required” 属性的 < input> 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 < input> 元素。
:read-onlyinput:read-only选择指定了 “readonly” 属性的 < input> 元素。
:read-writeinput:read-write选择不带 “readonly” 属性的 < input> 元素。
:requiredinput:required选择指定了 “required” 属性的 < input> 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:validinput:valid选择所有具有有效值的 < input> 元素。
:visiteda:visited选择所有已访问的链接。

?最后?

🍒欢迎点赞 👍 收藏 ?留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

文章来源:https://blog.csdn.net/qq_74095822/article/details/135069304
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。