链接伪类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. detours学习

    最近学习detours3.0,总结下学习过程,给后来学习者一点参考,也便于自己以后复习 首先应该知道detours可以干什么,学习之前最好看一下detours文档,这个文档很简单,只有4篇文章,相对比 ...

  2. scrapy爬取cnblogs文章列表

    scrapy爬取cnblogs文章 目标任务 安装爬虫 创建爬虫 编写 items.py 编写 spiders/cnblogs.py 编写 pipelines.py 编写 settings.py 运行 ...

  3. iOS开发UIEvent事件简介

    1.UIEvent简介 UIEvent是代表iOS系统中的一个事件,一个事件包含一个或多个的UITouch: UIEvent分为四类: UIEventType typedef NS_ENUM(NSIn ...

  4. 去掉Word 标题编号变成黑框

    问题: 在使用Word编写文档时,提前拟好的标题编号会突然变成黑框(黑色的方框,黑色的矩形),如下图 解决方案: 1.将光标定位到标题中,紧邻黑框的右侧 2.按键盘左方向键使方框变成黑色 3.按键盘的 ...

  5. 『BASH』——Learn BashScript from Daniel Robbins——[001-002]

    ABSTRACT: Daniel Robbins is best known as the creator of Gentoo Linux and author of many IBM develop ...

  6. 剑指offer——02二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  7. 3.3_springBoot2.1.x检索之RestHighLevelClient方式

    1.版本依赖 注意对 transport client不了解先阅读官方文档: transport client(传送门) 这里需要版本匹配,如失败查看官网或百度. pom.xml <?xml v ...

  8. Spark Streaming的简单介绍

    本文讲解Spark流数据处理之Spark Streaming.本文的写作时值Spark 1.6.2发布之际,Spark 2.0预览版也已发布,Spark发展如此迅速,请随时关注Spark Stream ...

  9. jboss未授权Getshell

    一.jboss未授权访问Getshell 1.jmx-console/HtmlAdaptor?action=inspectMBean&name=jboss.system:type=Server ...

  10. arm-linux-copydump 的使用

    生成可以执行的 2 进制代码 [arm@localhost gcc]#arm­linux­copydump ­O binary hello hello.bin