伪类选择器

最新推荐文章于 2022-11-02 23:34:40 发布

abc219365

最新推荐文章于 2022-11-02 23:34:40 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/abc219365/article/details/118858749

版权

链接伪类选择器：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

代码即实现:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>

<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>

</body>
</html>

https://www.w3school.com.cn/css/css_pseudo_classes.asp(详细伪类)

伪类列表元素

常用于列表的几个伪类元素我们需要知道的有：

:first-child：选取列表中的第一个元素；
:last-child：选取列表中的最后一个元素；
:nth-child()：指定我们需要选取的元素，括号内的值可以是数字，自变量为n的表达式以及even或者是odd（也就是奇偶数）。

<style>
    li{
        font-size: 28px;
        list-style: none;
    }
    li:first-child{
        color: green;
        font-weight: bold;
    }
    li:last-child{
        color: red;
        font-weight: bold;
    }
    li:nth-child(3){
        color: #0000FF;
        font-weight: bold;
    }
</style>

<ul>
    <li>eoeo</li>
    <li>monster</li>
    <li>fire</li>
    <li>lucky</li>
    <li>tracer</li>
</ul>

:link：未访问的链接，链接默认状态
:visited：已经访问过的链接
:active：获得焦点，链接激活的状态
:hover：鼠标放到链接上显示的状态

简单实例：

a:link{
    color: red;
    text-decoration: none;
}
a:visited{
    color: purple;
    text-decoration: line-through;
}
a:hover{
    color: green;
    text-decoration: underline;
}
a:active{
    color: blue;
    text-decoration: overline;
}

<ul>
    <li><a href="https://www.baidu.com/">百度一下</a></li>
    <li><a href="http://hxke.com/">好学课堂</a></li>
    <li><a href="#">鲸设网</a></li>
    <li><a href="https://www.9xkd.com/">侠课岛</a></li>
</ul>

abc219365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
伪类选择器

链接伪类选择器：/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:hover { color: #FF00FF;}/* 已选择的链接 */a:active { color: #0000FF;}代码即实现:<!DOCTYPE html><html><head><style&g
复制链接

扫一扫