一、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标签伪类选择器的注意点与练习的更多相关文章

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

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

  2. a标签伪类选择器+过度模块

    a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问 ...

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

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

  4. HTML连载63-a标签的伪类选择器

    一.a标签的伪类选择器 1.通过观察可以发现a标签存在一定状态 (1)默认状态,从未被访问过 (2)被访问过的状态 (3)鼠标长按的状态 (4)鼠标悬停在a标签上的演示 2.什么是a标签的伪类选择器? ...

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

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

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

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

  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. Keras深度学习框架之损失函数

    一.损失函数的使用 损失函数[也称目标函数或优化评分函数]是编译模型时所需的两个参数之一. model.compile(loss='mean_squared_error', optimizer='sg ...

  2. oracle数据库重要的查询语句

    查看所有数据文件(dbf文件)的存放位置 SQL> select name from v$datafile; 标红色的为默认表空间文件 SQL> select name from v$da ...

  3. Properties（hashtable的子类）

    Properties: Properties是hashtable的子类(在java.util包中).该集合的特点:可以用于键值对形式的配置文件,且不允许Key重复,若有重复的,后者会覆盖前者. 也就是 ...

  4. 进阶之路 | 奇妙的IPC之旅

    前言 本文已经收录到我的Github个人博客,欢迎大佬们光临寒舍: 我的GIthub博客 学习清单: IPC的基础概念 多进程和多线程的概念 Android中的序列化机制和Binder Android ...

  5. 用 Python 分析今年考研形势

    还有5天,就到了考研初试的时间了. ! 尽管今年研招网内部,已经做了优化改善,还是抵挡不住考生们的报名热情(网站崩溃). ​ 2017年考研人数增长至201万人, 2018年则达到238万人, 201 ...

  6. [MongoDB] 使用PHP根据_id字段查询数据

    mongo中的_id是一个objectid对象类型,不管是查询时作为条件,还是列表时展示内容,都需要进行一下抓换 查询时要转为objectid对象 列表时要把对象转成字符串覆盖回_id字段 $filt ...

  7. 有关版本控制--SVN

    什么是版本控制? 这个之前有记录过相关的内容 版本管理就是管理更新的历史记录, 它给我们提供了一些在软件开发过程中必不可少的功能,例如: 记录一款软件添加或更改源代码的过程 回滚到特定阶段,恢复误删除 ...

  8. GitHub当作私密的版本控制系统远端版本库私有化

    目的 我打算把所有服务器的配置文件用git管理起来,这样可以记录配置变更状况. 但是有一个问题是,如何多人协作?服务器配置信息非常敏感,如果这个版本库泄漏,整个公司的服务器架构就彻底泄漏了. 这个版本 ...

  9. 源码浅析：MySQL一条insert操作，会写哪些文件？包括UNDO相关的文件吗？

    DML操作的大致流程 在解答上述疑惑之前,我们来梳理一下DML操作的大致流程: 1.语法解析.语义解析 2.生成执行计划 3.事务修改阶段 1) 激活事务,事务状态由not_active变为activ ...

  10. Linux下的 Mysql 8.0 yum 安装 并修改密码

    1.MySQL版本: mysql> select @@version;+-----------+| @@version |+-----------+| 8.0.18 |+-----------+ ...