链接伪类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. 导出lab动态命名文件夹文件名

    set tmp=%date:~0,10%echo %tmp:/=-%mkdir %tmp:/=-%cd %tmp:/=-%exp meet/meet@orcl_11 file=%tmp:/=-%.dm ...

  2. 把Debian 设置中文环境

    要支持区域设置,首先要安装locales软件包: apt-get install locales 然后配置locales软件包: dpkg-reconfigure locales 在界面中钩选上“zh ...

  3. CodeForces-1221A-2048 Game-思维题

    You are playing a variation of game 2048. Initially you have a multiset ss of nn integers. Every int ...

  4. axios全局拦截响应

    在系统开发过程中,若遇到长时间未操作,则需要将页面跳转到登录页面.因为现在都是前后端分离的开发模式,路由跳转都交给前端,而后端只返回一个报错信息,例如"errorMsg":&quo ...

  5. uoj192 【UR #14】最强跳蚤

    题目 和成爷达成一致,被卡随机的话就是过了 考虑一个完全平方数的所有质因子次幂一定是偶数,于是对于每一条边我们都只保留其出现次数为奇数的质因子 注意到有一个点的\(w\leq 80\),于是考虑状压质 ...

  6. Pod 私有仓库构建

    Pod 私有仓库构建 创建`私有仓库索引库`(iOS) 添加`私有仓库索引库`到本地repo管理 创建自己的`组建库工程 上传`组建库工程`到`私有仓库索引库` App工程调用`组建库工程` 目的 私 ...

  7. item字母问题

    解决方法:复写toString方法 @Override public String toString() { return this.getBookTypeName(); } 将对象的toString ...

  8. Linux 实用指令（10）-RPM和YUM

    目录 RPM 和 YUM 1 rpm 包的管理 1.1 介绍 1.2 rpm包的简单查询指令 1.3 rpm包名基本格式 1.4 rpm包的其他查询指令: 1.5 卸载rpm 包 1.6 安装rpm包 ...

  9. kafka 扩展partition和replication-factor

    问题: 1. kafka的topic 是程序自己建立,默认只建立8个partitions,1个replication-factor 目的: 扩展partitions 到9个, replicatoion ...

  10. 【学术篇】bzoj3262 陌上花开. cdq分治入门

    花儿们已经很累了-- 无论是花形.颜色.还是气味, 都不是为了给人们摆出来欣赏的, 更不是为了当做出题的素材的, 她们并不想自己这些属性被没有生命的数字量化, 并不想和其它的花攀比, 并无意分出个三六 ...