【响应式Web前端设计】:link、:hover、:active和:visited的区别

女爷i 2022-11-14 01:29 137阅读 0赞

**:link、:hover、:active和:visited的区别？  
:link表示鼠标点击之前，也称为原始状态  
:hover表示鼠标悬停状态  
:active表示鼠标点击状态  
:visited表示鼠标点击之后状态**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html" charset="UTF-8">
        <title>isolated star学习四个伪类选择器</title>
        <style type="text/css">
            /*点击之前*/
            a:link { 
                background-color: red;
            }
            /*鼠标悬停状态*/
            a:hover { 
                background-color: green;
            }
            /*点击状态*/
            a:active { 
                background-color: blue;
            }
            /*点击之后状态*/
            a:visited { 
                background-color: gray;
            }
            /*改变文字的默认颜色以及消除下划线*/
            a{ 
                color: white;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        
        <a href="http://www.aimacademy.cn/" target="_blank">点击进入爱玛学院</a>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关【响应式Web前端设计】i标签和em标签的区别

很多人以为i标签和em标签都只是HTML用于斜体的标签，并不知道他们有什么区别。其实对于熟悉SEO的人来说，他们的区别挺大的（普通用户略过）。 i标签的作用：仅仅是为了让

左手的ㄟ右手/ 2022年11月15日 11:41/ 0 赞/ 133 阅读

相关【响应式Web前端设计】:link、:hover、:active和:visited的区别

:link、:hover、:active和:visited的区别？ :link表示鼠标点击之前，也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标

女爷i/ 2022年11月14日 01:29/ 0 赞/ 138 阅读

相关【响应式Web前端设计】HTML DOM padding 属性

定义和用法 padding 属性设置元素的内边距。 padding 属性定义元素边框与元素内容之间的空间。该属性可采取 4 个值：如果规定一个值，比如 div \

刺骨的言语ヽ痛彻心扉/ 2022年11月14日 00:59/ 0 赞/ 212 阅读

相关【响应式Web前端设计】Register Demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

妖狐艹你老母/ 2022年11月14日 00:59/ 0 赞/ 174 阅读

相关【响应式Web前端设计】Login Demo

body{ background: url('../img/1.png')no-repeat center center fixed; backg

曾经终败给现在/ 2022年11月14日 00:52/ 0 赞/ 182 阅读

相关【响应式Web前端设计】CSS 定位详解

文章目录 1 position 属性的作用 2 static 属性值 3 relative，absolute，fixed 3.1 relat

骑猪看日落/ 2022年11月14日 00:50/ 0 赞/ 207 阅读

相关【响应式Web前端设计】H5新特性

![在这里插入图片描述][20210610190438430.png] 当属性值不包括空字符串、“<”、“>”、"="、单引号、双引号等字符时，属性两边的引号可以省略。属

谁践踏了优雅/ 2022年10月06日 01:57/ 0 赞/ 159 阅读

相关【响应式Web前端设计】!important的用法及作用

div \{ color: \f00 !important; \} div \{ color: \000; \} //上述代码中，ie6及其以下浏览器div的文本颜色为

谁借莪１个温暖的怀抱￠/ 2022年10月05日 12:53/ 0 赞/ 166 阅读

相关响应式Web设计

1、什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"（vie

Bertha 。/ 2022年09月30日 09:57/ 0 赞/ 244 阅读

相关前端之响应式设计

一天到晚的听人吹什么响应式设计，具体问又支支吾吾，打不出个具体所以然来，今天我就大概讲一下响应式设计，顺便讲一下其它的几种设计的区别。现在前端存在着这么几个布局： 1

╰+哭是因爲堅強的太久メ/ 2022年07月12日 03:26/ 0 赞/ 194 阅读