尚硅谷前端基础 (35)

好了，刚刚我们说了这么几个伪类啊，接下来我们来继续还是聊这个，诶伪类的话题，我们来新建一个文件，我们说一组特殊的，也不算特殊吧，就是说的是都是拿一个元素做演示，我们是一个A元素的一个伪类，A元素还记得吧，虽然好久没用了，对吧？A元素就是我们的这个叫超链接啊，超链接的伪类，那我们刚才也提到过了，尾类，它是用来表示一些这个。特殊的状态，那我们先来想一下A有什么特殊状态？我们来写一个超链接，我们这直接来一个井号吧，我们简写先写一个链接地HTTPS冒号斜杠，斜杠3W点百度点com，那这个是我们的一个这个百度，诶百度随便写一个啊这一保存我们直接运行一下。诶，那百度是这么一个效果对吧？在这儿呢，我再写个换行啊，我们区分一下，诶然后呢，这里边我再写个超链接啊，超链接呢，我随便写一个，我随便写一个CTRLCCTRLV，我们这儿直接来一个百度123，我这儿也写百度版，一写百度名字都一样，链接不一样，那这里面其实你会发现有一个特点，上边这链接是紫色的，下边这链接是是蓝色的，为什么会出现这种情况，诶之前我们讲车链接的时候已经说了，因为这个地址我访问过，所以它是紫色的，而这个地址我没有访问过，所以它是蓝色的，所以这个时候我可以改个名儿，这个百度呢，我叫做一个诶访问过的链接，哎，而这个百度下边这个呢，我们叫做一个哎，没访问过的一个链接，所以这个时候我们就说到了我们的超链接的几种状态，这是我们看到第一个状态，有几种状态，第一个哎酶。

没有访问过的链接啊，第二个我们叫什么呢？诶叫做访问过的链接，我们想一下，那这个是不是也属于是特殊状态，你们想想诶，那我这个链接我有没有访问过，我们现在写这个网页我知不知道，诶有同学说老师我知道啊，你第一个链接访问过，第二个链接你没访问过，但一定吗？诶一定注意，这可不一定啊，因为这个百度这个链接在我的电脑上访问过，是不是意味着在所有人电脑上都访问过呢？诶这可不一定，所以这个东西到底访没访问过，它是由用户的行为，由用户的历历史记录来决定的，用户访问过，有这个历史记录，OK，那就是一个应该是紫色的，没访问过，没有这个历史记录，是不是就是一个蓝色的，所以这个时候我们说的这两个两种状态还有什么。

哎，你要注意了，当我们这个呃，鼠标一上去的时候，这个鼠标是不是变成一个小手啊，哎，所以这个时候这个状态我们待会儿再去说吧，我们待会去说，我们先说这个访问过没访过这个事儿，我们在这儿直接来一个style标签，Style标签我们直接来说A的状态，第一个没访问过，那现在我想给这个没访问过的链接设置一个颜色，设置一个什么呢？红色那要怎么设置，诶有同学说老师你直接给它加个类，比如叫做一个red，然后你通过这个red来给它设置个红色，这样不就行了吗？Color来一个red这么写行不行？

诶行啊，没问题，但是问题是现在我这么写跟他有没有访问过有没有关系，没有关系，即使待会儿你点了这个链接，你让他访问过，他依然还是会是红色，为什么呢？因为你是通过这个类来设置的，这个类跟他有没有访问过，有没有关系，诶注意这个类跟他有没有反过一毛钱的关系都没有，所以这里边我们并不能通过这个类去表示我们应该通过什么，通过一个尾类，所以我们A的尾类A冒号，我们直接来一个link link就表示链接，我们直接来一个color，来一个red，这样我们来看是不是它就变红色了，但是这个有没有变，这个没变，为什么？因为link的话，我们来说一下link，我们暂时先这么理解吧，哎，Link我们一般用来干嘛呢？哎，Link用来什么呢？诶，用来表示我们这个没访问过的链接啊。

没访过的链接，但是其实严格上来讲，它应该访问的是什么呢？表示的是正常的链接，只要是正常的链接都应该属于另个，但是现在我们先不就对这个事儿，你这就记住了，Link就表示没防屋的链接，所以我加上link以后，这玩意儿是不是就变成红色了？哎，只有它变了，而他没变，为什么它没变？因为他访问过，懂这意思吗？哎，所以link就表示是一个特殊状态，表示是一个没访问的链接，那还有谁呢？我直接来一个A，冒号一个VZP的，VZ的什么意思呢？叫做访问过的，我们直接写上啊，冒号一个visit，它用来什么呢？哎，用来表示我们这个访问过的链接，也就是说我通过link可以给没访问的链接设置样式，而通过visit可以给访过的设置样式，比如说我visit，我们直接来一个，我想设置一个color color我们叫。

什么呢？叫做一个orange，访问过的我它是一个橙色，那你会发现现在它是不是变成一个橙色，哎，没访问过的是一个橙色，没访问的是一个红色，这就是这两个尾类，一个叫做link，一个叫做visit link表示哎没访过的，Visit表示访问过的这两个链接啊，那这里边这两个尾类注意了，只适用于A，别的元素都不能用，你也能猜到，因为只有A涉及到访没访问过，而其他的是不是就涉及不到这个问题，哎，涉及到这个问题啊好，那接下来我们再来看啊，再来看，那现在我给这个A设置一个颜色，是一个orange，对吧，是个orange，那我希望什么呢？我希望啊。

访问过的链接呢，我让再大一点，比如说我希望自己大小是一个50像素啊，访问过的链接我让你大一点，这时候你看啊，我设置完了，你看有没有用，有没有用，没有任何作用，诶那是不是老师你写错了呀，看着啊，把它挪个地儿，挪到这个link这，挪到link这。大没大，哎，大了，有同老师，这两个东西都大了，哎，注意了，我们说过link表示是正常的链接，访问过的链接叫正常，没访过的也算正常，所以这时候这两个都大了，但是现在关键问题不在这儿，关键问题在哪儿？关键问题在这儿，我这个代码在link里好使，但是在我们的visit里边它不好使。

为什么？哎，为什么注意了，我们来说一下由于什么呢？我们这个visit的表什么意思，表示的是访问过还是没访问过，也就是说通过V的我们可以为这些访问过的链接单独设置一些特殊的样式，对吧？哎，我们想一下，我们说一下由于什么呢？你由于隐私的原因，什么叫隐私的原因，你想一下你上的网站，你上的网站不管是好还是不好，可能你确实上一些比较好的网站，可能确实有同学会上一些没有那么好的网站，或者说你至少不希望大家知道你上的这些网站，或者即使他是好的网站，可能你也不希望别人知道你上这个网站，因为我上网这个行为跟你没有什么关系，对吧？所以大部分情况下，我们的上网记录，我们是不希望被别人看到的，所以这个时候这叫隐私，我们不希望别人知道，那我们想一下，假如说我们在这里边，我给他设置一个方size。

是一个50像素，而且它还生效了，那这块会出现什么问题，会出现一种情况，你这个访问过的这个字会特别特别的大，那这个时候他跟那个没访问的区别就很很明显，那这样就会带来一个很严重的问题，什么问题呢？就是。假如说你变成正用电脑呢，哎，你后边有人走过去，他一看啊，你那链接访问过，那字特别大，他一看，哎吧，哥们儿，你上过那网站呀，你真行诶，啊那这样是不是你的隐私就被别人看见了，哎除了这种情况，可能还有一些我们在网上在上别人网站，他可能会采取这一些这种方式来获取我们的一些隐私的信息，所以为了避免我们隐私这种形式或者内种形式的暴露，所以这种微的这种东西，由于隐私的原因，所以我们这个visit。

哎，V的这个什么呢？这个尾类只能什么呢？只能修改链接的一个颜色，它只能改颜色，颜色以外的什么大小啊，背景啊等等一系列的，我们的这个微的都不能改，只能改颜色，为了什么？就是为了保隐私，所以其实呃，我个人的经验上来讲，威利的这个伪类其实在我们的这个开发里用的并不是特别多，一般情况下我们也不愿意说把用户给他一个访问过的链接设置一个这个变一个颜色，除非是一些可能用户经常访问，用户需要区分他有没有访问过，一般情况下建议不要去轻易的去设置或者去改这个V，有时候会让人感觉不太不太好，但是这个东西根据你网站的不同，你需要考虑一下这个用户体验啊，你网站无所谓，那你还设不设置，那一般情况下，呃，不是特别建议去设置啊，不是特别愿意设置好，这也是我们两个尾类link。

Visit link表示正常的链接，没访问的链接，Visit表示访问的链接，但是visit里面只能改颜色，别的什么都不能改。别别剩下的什么link啊，不能改啊，只有visit里边只能改颜色啊，那接下来我们再看啊，有时候我们还需要什么效果呢？有时候我们还希望当我鼠标移到进去以后，这个链接可以变成一个颜色，哎，表示什么呀？哎，我确实移进去了，那这里边我们一个伪类，这个尾类就不是专属于超链接的了，别的元素也可以用，但是以后我们再展示吧，Ho啊ho用来表示什么呢？用来表示我们鼠标移入的一个状态啊，鼠标移入。移进去，也就是说我可以在鼠标移进去以后，给大家设置一个特殊的样式啊，这我们可以直接来一个A冒号，我们叫做一个ho ho呢，我可以来一个color color，比如说我来一个这个这个颜色了，那这样的效果ho就表示鼠标移入，当我鼠标一一进去，它是不是就变成这个颜色了，哎，表示一个鼠标移入，它就可以随便设置了啊，你可以设置方size，比如来一个50像素，那这样就意味着当你鼠标移入以后，这个字会。

变大对吧，字会变大啊这么一个效果啊，这是我们说鼠标移入啊，叫做一个whole，只要一进去就行，还有一个我们叫做active。Active什么意思呢？Active叫做鼠标点击啊，鼠标点击act active用来。哎，表示我们这个鼠标点击的状态，所以在这我可以直接A冒号一个active color，我直接来什么呢？呃，鼠标点击以后呢，变一个这个yellow green吧，诶yellow green，然后呢，哎，我们这个保存一下看效果。

一进去现在没点呢，什么叫active，我点，然后你别松手啊，你松手就跳转了，点的时候别松手，NEEA我先取消掉一点，不松手的时候是不是变成一个绿色呀，哎，变成一个绿色是这么一个效果啊，其实很简单啊，后鼠标一进去就变active，需要你去点击才会变，所以这个四个是我们说A相关的四个维类，A我们可能会经常设置的叫link，哎，表示正常的链接，表示访问过的链接，而hover表示的是诶表示的是鼠标一入的一个链接，Active表示的是一个激活，就是正在点击的一个链接，那这里边其中link和visit是我们超链接独有的，只能给A设置，而hover还有active。是所有元素都可以的啊，所有元素都可以，以后我们还要慢慢去展示，现在自己尝试一下超链接的一个伪类，好，我们来听一下。