HTML连载64-a标签伪类选择器的注意点与练习
一、a标签的伪类选择器注意点
(1)a标签的伪类选择器可以单独出现,也可以一起出现。也就是可以设置多个状态的样式。
(2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原则: (love\hate原则,即link\visited\hover\active)默认状态、被访问后的状态、悬停状态、长按状态
(3)如果默认状态的阿燕是和被访问过的状态的样式一样,那么可以缩写为
a{ color:颜色;},后面写了另外两种状态也是不影响的。
二、快捷键
(1)ul>(li>a)*8再点击Tab就可以自动生成列表
(2)按住Alt键,然后点击光标向下拉
三、练习
(1)在企业开发过程中编写a标签的伪类选择器最好写在标签选择器的后面(2)在企业开发中,和a标签盒子相关的属性,都写在标签选择器中(包括盒子的模式、宽度、高度、padding、margin)
(3)在企业开发中和a标签文字、背景、相关的都写在伪类选择中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> D161_PseudoClassCautions</title> <style> *{ margin:0; padding:0; } ul{ width:960px; height:40px; background-color: green; margin:100px auto; } li{ width:120px; height:40px; list-style: none;/*去掉前面的小黑点*/ float:left; background-color: purple; text-align: center;/*文字的水平排版*/ line-height:40px;/*文字行高和该行一样高*/ color:black; } ul li a { /*这个a标签这里设置了它的大小,可以理解为作用域变成和li一样大,因为我们想要让 整个小盒子都是作用域,如果不写这段大小设置的话,那么作用域就只有文字大小了*/ width:120px; height: 40px; display:inline-block; } ul li a:link{ color:white; text-decoration:none;/*去掉文字下划线*/ background-color: pink;/*这里讲解一个方法:就是如何判断作用域,我们可以采用加个背景颜色的方法,来进行判断*/ } ul li a:hover{ color:red; background-color: grey; } ul li a:active{ color:yellow; } </style> </head> <body> <ul> <li><a href="#">我是导航条</a></li> <li><a href="#">我是导航条</a></li> <li><a href="#">我是导航条</a></li> <li><a href="#">我是导航条</a></li> <li><a href="#">我是导航条</a></li> <li><a href="#">我是导航条</a></li> <li><a href="#">我是导航条</a></li> <li><a href="#">我是导航条</a></li> </ul> </body> </html>
二、源码:
D161_PseudoClassCautions.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/ D161_PseudoClassCautions.html
2.CSDN:https://blog.csdn.net/weixin_44630050
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
HTML连载64-a标签伪类选择器的注意点与练习的更多相关文章
- a标签伪类选择器以及伪元素:hover的案例
1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...
- a标签伪类选择器+过度模块
a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问 ...
- js进阶 10-11/12 表单伪类选择器的作用
js进阶 10-11 表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...
- HTML连载63-a标签的伪类选择器
一.a标签的伪类选择器 1.通过观察可以发现a标签存在一定状态 (1)默认状态,从未被访问过 (2)被访问过的状态 (3)鼠标长按的状态 (4)鼠标悬停在a标签上的演示 2.什么是a标签的伪类选择器? ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS学习笔记-03- 过渡模块之前奏篇 a标签的伪类选择器
CSS3 2D转换CSS3 3D转换CSS3 过渡CSS3 动画 CSS3 的四大金刚. 想要实现酷炫的视觉效果,上面4个是必须要掌握的.学习之前,先复习一下 视觉盛宴的前菜 :a标签的伪类选择器 铛 ...
- python 46 边界圆角 、a_img_list标签 、伪类选择器
一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- 超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法)。
<!DOCTYPE html>< html>< head> <meta charset="utf-8" /> < ...
随机推荐
- linux 删除文件 磁盘空间未释放
具体情况就是:删除了一个超大文件后,发现磁盘空间没有变化 原因:有进程正在使用这个文件,虽然我们从文件系统的目录结构上解除链接(unlink),然而文件是被 打开的(有一个进程正在使用),那么进程将仍 ...
- [RHEL8]关闭SELinux(同CentOS7)
修改配置文件(永久修改) # vi /etc/selinux/config SELINUX=disabled # 关闭 SELINUX=enforcing # 开启 命令方式(临时修改重启失效) # ...
- vue路由--使用router.push进行路由跳转
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 route-link是在html中静态定 ...
- IntelliJ IDEA与eclipse生成JavaDoc的方法
JavaDoc是一种将注释生成HTML文档的技术. 1.使用javadoc命令生成文档 首先了解一下javadoc指令的用法 用法: javadoc [options] [packagenames] ...
- .net core 部署到IIS 后出现 w3wp.exe 【】发生了未经处理的win32异常……
抗疫时期,想到弄个微信程序用于社区出入和复工复产人员流动登记,老早就买的盛派的书和视频,一直没时间看,趁这个需求,下载盛派weixinDSK开始学习,先是打开盛派的网站陆续无法打开, 帮助文档也没能抢 ...
- 简化MVVM属性设置和修改 - .NET CORE(C#) WPF开发
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简化MVVM属性设置和修改 - .NET CORE(C#) WPF开发 阅读导航 常用类属性设 ...
- XPath简介、功能及使用方法
html = '''<html><head><title>The Dormouse's story</title></head><bo ...
- PERC H310 配置详细步骤【阵列RAID创建】【阵列恢复】【阵列池创建】
机器配置: HP PRO6300 二手淘的201912,HP的主板芯片Intel Q75芯片组,集成显卡(集成显卡与H310阵列卡冲突),CPU Intel I5 3450 [raid5阵列创建] 1 ...
- ArcGIS Runtime SDK for Android 加载shp数据,中文乱码问题
针对ArcGIS10.2版本的解决办法(默认中文编码为OEM): 现有一个图层名称为“图层.shp”,以此为例: 1.拷贝一个cpg文件,修改名称为“图层.cpg”,并用文本打开cpg文件修改编码为“ ...
- ihandy2019笔记编程真题
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...