宗策

导航

伪类选择器

伪类选择器
- 选择元素的状态
1. 未访问状态 link
2. 访问过状态 visited
3. 鼠标悬停状态 hover
4. 点击状态 active

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

    div{
        background-color: rgba(255,0,0,0.5);
    }

/* 未访问 */
    a:link {
    color: yellow;
}
/* 悬停状态 */
    a:hover{
    color: blue;
}
/* 点击状态 */
    a:active {
    color: pink;
}

/* 访问过状态 */
    a:visited {
    color: rgb(255,0,0);
}
    *{
        border: 1px solid red;
    }
</style>
</head>
<body>
<div>
    <p>
        <span>abc</span>
    </p>
</div>
<a href="../imgs/a.jpg">超链接1</a>
<a href="../imgs/m.jpg">超链接2</a>
<a href="../imgs/n.jpg">超链接3</a>
<a href="../imgs/o.jpg">超链接4</a>
</body>
</html>
View Code

 

posted on 2020-04-28 17:41  宗策  阅读(172)  评论(0)  编辑  收藏  举报