链接伪类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. Linux date命令 crontab每个月最后一天

    ###使用date获取日期时间等 # 当前日期 openstack@ubuntu:~$ date 2019年 01月 15日 星期二 15:10:49 CST # 明天 openstack@ubunt ...

  2. Openstack nova-scheduler 源码分析 — Filters/Weighting

    目录 目录 前言 调度器 FilterScheduler调度器的工作流程 Filters 过滤器 Filters 类型 Weighting 权重 源码实现 关键文件及其意义 阶段一nova-sched ...

  3. 细数Intellij Idea10个蛋疼问题！

    Intellij Idea以下简称IJ. 昨天细数了IJ上的10大666的姿势,IJ确实很智能,在很多方便可以完爆Eclipes,可在某些方面真的被Eclipse秒杀 1.乱码 在Eclipse中很少 ...

  4. LightOJ 1341 - Aladdin and the Flying Carpet

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1341 题意:给你地毯面积和最小可能边的长度,让你求有几种组合的可能. 题解:这题就厉害 ...

  5. iOS开发系列-应用程序之间跳转

    概述 常见的涉及到应用程序之间的跳转场景,比如社交分享.支付宝.微信支付.链接跳转到应用. 在iOS中应用跳转的本质:打开一个应用只需要拿到对应应用的URL即可. 统一资源定位符 URL(统一资源定位 ...

  6. Error: Cannot find module '@babel/core'

    报错如下 产生原因 babel-loader和babel-core版本不对应所产生的, babel-loader 8.x对应babel-core 7.x babel-loader 7.x对应babel ...

  7. 安装Epson打印机但因lsb依赖错误而中断的驱动程序

    sudo apt-get install printer-driver-escpr 安装Epson打印机但因lsb依赖错误而中断的驱动程序 问题: 我正在安装 Epson XP-310 驱动程序,从这 ...

  8. C++ 系列：交换两个数字

    1. 创建中间变量 这是最快也是最简单的办法,例如: #include<stdio.h> int main(){ int a=10; int b=20; int temp; printf( ...

  9. Neo4j 因果集群搭建及neo4j-java-driver连接

    搭建Neo4j因果集群 1.下载企业版,当前是3,5,9版本 https://neo4j.com/download-center/#enterprise 2.配置,三个核心集群为例 配置文件,conf ...

  10. thinkphp 运算符

    我们可以对模板输出使用运算符,包括对“+”“ –” “*” “/”和“%”的支持. 大理石平台厂家 例如: 运算符 使用示例 + {$a+$b} - {$a-$b} * {$a*$b} / {$a/$ ...