a标签的伪类选择器

1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的。

2.格式:

1):link 修改从未被访问过状态下的样式。

2):visited 修改被访问过的状态下的样式。

3):active 修改鼠标长按状态下的样式。

4):hover 修改鼠标悬停在a标签上状态下的样式。

3.注意点:

1)a标签的伪类选择器可以单独出现也可以一起出现。

2)a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守 爱恨原则---love hate。

3)如果默认状态的样式和被访问过状态的样式一样,那么可以缩写(简单来说就是link跟visited可以直接用a标签里的color替代使用)。

4.在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面、和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)、和a标签文字/背景相关的都写在伪类选择器中。

过渡模块

1.过渡效果三要素:必须要有属性发生变化、必须要告诉系统哪个属性需要执行过渡效果、必须告诉系统过渡效果持续的时长。



2.注意点:当多个属性需要同时执行过渡效果时用逗号隔开即可。如果是分开设置过渡效果,则在后面设置的会覆盖前面的效果。



3.其他属性:





4.连写格式:transition:过渡属性 过渡时长 运动速度 延迟时间

注意点:4.1)当多个属性需要同时执行过渡效果时用逗号隔开即可---transition:过渡属性 过渡时长 运动速度 延迟时间,transition:过渡属性 过渡时长 运动速度 延迟时间。

4.2)连写的时候可以省略后面的两个参数,因为只要编写了前面的两个参数就已经满足了过渡的三要素。

4.3)如果多个属性运动的速度/延迟的时间/持续的时间都一样,那么就可以简写为transition:all 0s;。





5.编写过渡套路步骤:

1)先编写基本界面,不要管过渡。

2)修改我们认为需要修改的属性 。

3)再回头去给被修改属性的那个元素添加过渡即可。

a标签伪类选择器+过度模块的更多相关文章

  1. a标签伪类选择器以及伪元素:hover的案例

    1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...

  2. HTML连载64-a标签伪类选择器的注意点与练习

    一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原 ...

  3. js进阶 10-11/12 表单伪类选择器的作用

    js进阶 10-11  表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...

  4. CSS学习笔记-03- 过渡模块之前奏篇 a标签的伪类选择器

    CSS3 2D转换CSS3 3D转换CSS3 过渡CSS3 动画 CSS3 的四大金刚. 想要实现酷炫的视觉效果,上面4个是必须要掌握的.学习之前,先复习一下 视觉盛宴的前菜 :a标签的伪类选择器 铛 ...

  5. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  6. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  7. python 46 边界圆角 、a_img_list标签 、伪类选择器

    一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  8. 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类

    a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...

  9. 超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法)。

    <!DOCTYPE html>< html>< head>     <meta charset="utf-8" />     < ...

随机推荐

  1. 《区块链DAPP开发入门、代码实现、场景应用》笔记4——Ethereum Wallet中部署合约

    账号创建完成之后,账号余额是0,但是部署合约是需要消耗GAS的,因此需要获取一定的以太币才能够继续本次实现.在测试网中获取以太币可以通过挖矿的方式,在开发菜单中可以选择打开挖矿模式,但是这需要将Syn ...

  2. 1M大概多少个字

    <?php echo strlen("你"); 保存文件为gbk 输出2 保存文件为utf-8 输出3 说明不同编码占用字节不同 1M=1024kB 1KB = 1024B ...

  3. mariadb远程授权问题

    安装mariadb后,使用远程连接时 密码没有问题 但是每次打开都报这个错误: 这个错误是在进行远程连接的时候密码正确, 但是,进行远程授权的时候授权密码错误. 在数据库中执行下述代码即可: GRAN ...

  4. CentOS 7 使用 firewalld 打开关闭防火墙与端口

    1.firewalld的基本使用启动: systemctl start firewalld关闭: systemctl stop firewalld查看状态: systemctl status fire ...

  5. selenium窗口句柄以及对话框处理

    多窗口.句柄: 1.获取当前句柄:driver.current_window_handle 2.获取所有句柄:driver.window_handles 3.切换句柄:driver.switch_to ...

  6. DELL R720针对磁盘故障面板信息误报解决

    现象: 面板报警信息显示 PDR1101 fault detected on drive 0. Check drive... 经查资料是磁盘故障的原因,而r720的idrac似乎我们没有安装,我不能通 ...

  7. Spring Boot 配置多源的 RabbitMQ

    简介 MQ 是开发中很平常的中间件,本文讲述的是怎么在一个Spring Boot项目中配置多源的RabbitMQ,这里不过多的讲解RabbitMQ的相关知识点.如果你也有遇到需要往多个RabbitMQ ...

  8. linux卸载及安装mysql 5.7以上

    删除: 1.rpm -qa|grep -i mysql     查看安装的mysql 2./usr/local/mysql/support-files/mysql.server stop  停止mys ...

  9. Echo团队Alpha冲刺 - 测试随笔

    目录 测试工作的安排 测试工具选择和运用 测试用例文档 测试体会 项目测试评述 测试工作的安排 模块 测试人 测试内容 单元测试 李东权,黄少勇 测试类或者函数是否能正确处理用户请求 接口测试 林弘杰 ...

  10. 机房断电,导致xfs文件系统损坏

    记一次机房断电,导致xfs文件系统损坏处理方法 挂载时报以下错误: mount: mount /dev/sdb on /dev/sdb failed: Structure needs cleaning ...