链接伪类link：表示作为超链接，并指向一个未访问的地址的所有锚

链接伪类不可以加在div上

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--:link：表示作为超链接，并指向一个未访问的地址的所有锚-->

        <style type="text/css">

            a{

                text-decoration: none;

            }

            a:link{

                color: red;

            }

            #test:link{

                background: pink;

            }

        </style>

    </head>

    <body>

        <a href="#">点我点我点我</a>

        <div id="test">我是div啦</div>

    </body>

</html>

链接伪类visited：表示作为超链接，并指向一个已访问的地址的所有锚

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--:visited：表示作为超链接，并指向一个已访问的地址的所有锚-->

        <style type="text/css">

            a{

                text-decoration: none;

            }

            a:link{

                color: blue;

            }

            a:visited{

                color: red;

            }

        </style>

    </head>

    <body>

        <a href="#">点我点我点我</a>

    </body>

</html>

链接伪类target：代表一个特殊的元素，这个元素的id是URI的片段标识符。

可以利用target写一个div切换

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--:target 代表一个特殊的元素，这个元素的id是URI的片段标识符。-->

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            div{

                width: 300px;

                height: 200px;

                line-height: 200px;

                background: black;

                color: pink;

                text-align: center;

                display: none;

            }

            :target{

                display: block;

            }

        </style>

    </head>

    <body>

        <a href="#div1">div1</a>

        <a href="#div2">div2</a>

        <a href="#div3">div3</a>

        <div id="div1">

            div1

        </div>

        <div id="div2">

            div2

        </div>

        <div id="div3">

            div3

        </div>

    </body>

</html>

动态伪类  ：移入:hover ，移出:active

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test:hover{

                color: pink;

            }

            #test:active{

                color: red;

            }

        </style>

    </head>

    <body>

        <div id="test">

            我是test

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            a{

                text-decoration: none;

                color: black;

                display: block;

            }

            a:hover{

                font-size:24px;

                /*color: red;*/

            }

            a:link{

                font-size:48px;

                /*color: pink;*/

            }

            a:visited{

                /*font-size:96px;*/

                /*color: deeppink;*/

            }

        </style>

    </head>

    <body>

        <a href="#1">我是第一个a标签</a>

        <a href="#2">我是第二个a标签</a>

        <a href="#3">我是第三个a标签</a>

        <a href="#4">我是第四个a标签</a>

        <a href="#5">我是第五个a标签</a>

        <a href="#6">我是第六个a标签</a>

    </body>

</html>

实际应用

css---3链接伪类与动态伪类的更多相关文章

  1. 用cglib包来为类产生动态代理类对象

    一:在JDK里也有动态代理的类和接口,是Proxy和InvocationHandler,但是Proxy只能为接口产生代理类,借助InvocationHandler的实现类来完成对类对象的代理: 但是在 ...

  2. css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

    后代选择器 祖先元素 后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器 元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器 元素~兄弟元素(该 ...

  3. ios动态创建类Class

    [Objective-C Runtime动态加载]---动态创建类Class 动态创建类Class,动态添加Class成员变量与成员函数,动态变量赋值与取值,动态函数调用等方法 a.使用objc_al ...

  4. java代理模式及动态代理类

     1.      代理模式 代理模式的作用是:为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个客户不想或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用 ...

  5. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  6. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  7. CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

      伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":&q ...

  8. Css3动态伪类

    通常我们可以用CSS中伪类和js中的鼠标事件来定义. 动态伪类 起作用的元素 描述 :link 只有链接 未访问的链接 :visited 只有链接 访问过的链接 :hover 所有元素 鼠标经过元素 ...

  9. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

随机推荐

  1. C++输入cin详解

    输入原理: 程序的输入都建有一个缓冲区,即输入缓冲区.一次输入过程是这样的,当一次键盘输入结束时会将输入的数据存入输入缓冲区,而cin函数直接从输入缓冲区中取数据.正因为cin函数是直接从缓冲区取数据 ...

  2. Python入门 mac系统/linux系统 安装python （一）

    mac 系统 在命令行里,不会用命令行就别学编程了,自行查一下怎么用吧 brew install python 如果没有brew这个命令: 在mac终端下执行 /usr/bin/ruby -e &qu ...

  3. Harbor任意管理员注册漏洞复现CVE-2019-16097

    注册时抓包 添加poc "has_admin_role":true 管理员权限 POC POST /api/users HTTP/1.1 Host: 127.0.0.1 Conte ...

  4. Python骚操作(一)

    1. 交换变量值 2. 将列表中所有元素组合成字符串 3. 查找列表中频率最高的值 4. 检查连个字符串是不是由相同字母不同顺序组成 5. 反转字符串 6. 反转列表 7. 转置二维数组 8. 链式比 ...

  5. Python中and_Or

    自 http://www.cnblogs.com/BeginMan/p/3197123.html 一.and: 在Python 中,and 和 or 执行布尔逻辑演算,如你所期待的一样,但是它们并不返 ...

  6. Windows7 打开word2003提示：向程序发送命令时出现错误 解决方案

    1.关闭所有打开的Word文档:(包括任务管理器里的进程)2.复制这条命令:%appdata%\microsoft\templates3.开始 → 运行 → 粘贴上面复制的命令 → 确定4.在打开的目 ...

  7. windows下怎么给ubantu虚拟机全屏的处理

    ubantu版本时16.04 windows下窗口太小需要设置 相信很多人在装虚拟机的时候,遇到了窗口过小不能自适应的问题.我也是查了好多资料,都说安装Vmware Tools即可解决,还有说修改分辨 ...

  8. PHP魔方解密

    安装composer参考:https://www.runoob.com/w3cnote/composer-install-and-usage.html 常用的加密类型及特征 加密类型 加密特征 Zen ...

  9. BeanPostProcessor原理学习

    <Spring源码解析>笔记 1.自定义的BeanPostProcessor @Component public class MyBeanPostProcessor implements ...

  10. 选择器zuoye

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...