链接伪类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. 6.RabbitMQ Linux安装

    RabbitMQ在Linux上安装,需要很多依赖库,如何不能解决依赖库德版本问题,可能会比较麻烦,最好结合Yum进行安装,我这里使用的Linux环境是64位CentOS6.2 ,使用Yum源是阿里云的 ...

  2. JavaScript笔记 – 程序语法设计

    一.基础语法设计 JavaScript是可以与HTML标记语言混合.用于网页交互式的解释型脚本语言.由国际标准ECMAScript提供核心语言功能.文档对象模型(DOM)提供访问和操作网页内容的方法和 ...

  3. 手机网站Meta的使用

    meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. ...

  4. JVM 与 Linux 的内存关系详解

    来源:美团技术团队 在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m. ...

  5. 2019-2020 ICPC, NERC, Northern Eurasia Finals

    A. Apprentice Learning Trajectory rdc乱编的做法 考虑贪心,每次会选择结束时间最早的. 设当前时间为 \(x\),那么可以区间有两类 a) \(l_i \leq x ...

  6. D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)

    坐标轴(Axis)   坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐 ...

  7. 关于RSA加密和签名的区别与联系

    发现网上对于RSA加密和签名的介绍普遍偏向于使用和概念的说明,今天想说一点不一样的.对于加解密和签名的使用及概念就不再说了,不知道的请自行百度. 签名的本质其实就是加密,但是由于签名无需还原成明文,因 ...

  8. NAS设备部署后采用Mobox企业云盘来提升管理功能

    首先NAS介绍      网络接入存储(Network-Attached Storage,简称NAS)是存储设备通过标准的网络拓扑结构(例如以太网)添加到一群计算机上.NAS是文件级的存储方法,它的重 ...

  9. leetcood学习笔记-38-报数

    ---恢复内容开始--- 题目描述: 第一次提交: class Solution: def countAndSay(self, n: int) -> str: f = " for i ...

  10. 校园商铺-2Logback配置与使用-3验证配置

    1. 验证logback配置 1.1. 启动tomcat,得到CATALINA_BASE地址: 1.2 访问接口,查看日志 浏览器打开http://localhost:18080/o2o/supera ...