27.尚硅谷_HTML&CSS基础_伪类选择器.avi原创

我们接着来上课啊，那接下来呢，我们来说一个新的东西，还是接下来说我们这个选择器啊，我们来一个叫什么呢？叫做一个伪类选择器啊伪类选择器首先呢，类选择器我们是知道对吧，就是我们那个class，诶这又出来一什么呀，出来一个尾类选择器，什么叫尾类选择器呢？我们来看看这么一个东西啊，那这里边啊，我写这么一个东西，我写这么一个超链接h drive等于什么呢？等于一个井号，这里边写什么呢？写一个我是一个这个超链接，这样吧，不写井号，咱们写一个完整的来一个HTTP冒号斜杠，斜杠3W点百度点。com保存，然后呢，在我们这个火狐狸运行，诶打开了这是一个超链接啊，诶，然后这样啊，我为了对比呢，我再写一个我这。

他两个换行，这我不写百度了，来一个百度123456这么一个网站，那这个网站这肯定是我肯定是没访问过的对吧，那我发现我们说这两个链接会呈现出两个状态，我这一保存，诶发现什么了，诶一是不是颜色不一样啊，一个是发紫，还有一个是蓝色对吧？哎蓝色，那这是为什么呀？诶为什么呢？因为上边这个3W点百度点。com我们这个链接干嘛呀，我访问过啊，我访问过，所以这个叫一个什么呢？叫一个这个，诶访问过的什么呀，链接啊，访问过的一个链接，而下边这个呢，叫什么呀？诶叫做一个没访问过的什么呀，链接，或者一个未访问过的链接啊来我这一保存，现在一刷新走你，诶，所以你会发现访问过的链接默认是不是紫色的，而没访问过的是不是就是一个蓝色的呀，哎蓝色的，那现在我有这么一个需求，我需要干嘛呢？我想给我。

我的什么呀？访问过的链接设置成什么呢？设置成一个红色，没访问的链接呢，设成什么呀，绿色，那这个东西我要怎么写呀，我要怎么写呀？哎，那我一想我这么写呗，我写一个这个style，我来一个A，然后来一个大块来什么呢？来一个这个color color来一个这个red，我这一保存这么写行不行，诶我们来一刷新，诶走你，哎呦这么一写出事了干嘛了，我这A叫什么？是不是叫元素选择器啊，它有没有考虑过你这个链接访没访问过呀，没有，只要你是A，我是不是全都给你选中啊，哎，全都给你选中，而且我这一选中干嘛了，包括没访问过的，包括访问过的是不是都变成红色了，哎，我又不想要这个效果，那这玩意儿怎么办呢？这么写不行，那我一想，那现在我们来看这两个链接谁访问过呀，是不是第一个访问过，而第二个没访问过呀，那我。

你想这样吧，我给第一个加一个class class叫一个，呃叫一个随便写一个ABC，第二个加一个class叫一什么呢？叫一个这个BCBCD，那我就这么写了，点一个ABCABC这是什么呀，这是是不是没访问过的呀，诶没访问过诶哦访问过访问过的我来什么呢？来一个color，来一个这个什么呀，Red，而我们这个什么呀，BCD是什么呀，没访玩过的吧？诶来一个color，来一个这个green，诶green yellow我这一保存是不是么？这么一颜色呀，我这一刷新走你诶效果是不是确实有了呀，但是这对不对呀，这个第一个链接百度这个链接谁访问过，我访问过，但是是不是意味着我这个网站的所有用户都访问过呀，不是，这个东西有可能有的用户访问过，是不是有的用户没访问过呀？可是我这么一写导致于什么结果？

第一个链接所有用户看都是什么，都是红色，而第二个链接所有用户看是不是都是这么一个绿色呀，哎，所以我这么写呢，也不行，因为我这么一写是不是就写死了呀，那这玩意儿怎么办？诶那就需要用到我们这么一个概念叫什么呢？叫做一个伪类，那什么叫伪类，什么叫伪呀。既然叫尾了，那你说它存不存在呀，是不存在呀，哎，不存在，所以这里边我们来说尾类，指的尾类和类呢差不多，尾类干嘛的呢？专门用来表示我们这个元素的一种什么呀，哎，特殊的什么呀，状态啊，它是表示的一种状态啊，状态，而这个类本身这个类有没有啊，没有，它只是表示的是一种特殊的状态，比如什么呢？比如我们这个访问过的超链接，比如什么呢？比如我们这个普通的什么呀，超链接比如什么呀，诶比如我们什么呀，诶叫做一个诶获取焦点的这些文本框，这些都什么呀，是不是都是一些这种特殊的一个什么呀状态，那当什么呢？当我们需要为处在这。

这些特殊状态的这个元素设置样式时就可以什么呢？诶就可以使用我们的什么呀，使用我们的这个伪类啊，使用我们这个伪类，那我们这块来看一下怎么用这个伪类，我们直接来看我们这个文档伪类呢，我们直接说一下我们常用的什么呀，给链接定义的这些样式，我们来看这有一个诶你看啊，咱们这A我们就不管了，A实际上指什么意思呀？诶传链接的意思啊，实际上这里边是一个什么呀，是一个这个交集选象器啊A，然后后边不看A，我们直接看这个什么呀，叫做一个冒号link啊冒号link，所以你要注意我们所有的尾类实际上都是什么呀，都是以冒号开头的啊，冒号开头的有一个冒号link link叫一个什么呀，叫做一个正常的链接啊，就是一个正常的链接叫做一个冒号link，还有一个叫什么呀，叫冒号。

Visit叫一个什么呢？叫做一个访问过的链接，还有一个叫什么呢？冒号ho，叫做一个鼠标划过的链接，还有一个叫冒号active，叫做一个正在点击的链接，这个冒号link，冒号visit，还有冒号ho，还有一个冒号active就是什么呀？就是尾类啊，就是伪类，那现在我们来看不这么写了，我来干嘛呢？写这么一个，我来做这么一事，为没访问过的这个链接，诶设置一个这个颜色，为什么呢？为绿色，那我怎么设置啊，我直接来个A，然后大块来一个color来什么的，来个yellow green，这样行不行啊？哎，不行，我这么一写完了，一刷新是不是都变了呀，而我只需要什么呢？没访问过的，那同时那我就有条件了，你得是个什么呀，你得是个A，同时你是不是还得一个没访问过的A呀？那怎么办呢？A后边紧跟。

这一个冒号来一个什么呀？Link，诶link我这一保存，咱们来看，现在一刷新走，你是不是只有他变了呀，诶只有他变了啊，所以这个冒号link这是我们说的第一个伪类叫什么呢？哎，其实严格来讲，它不叫没仿子的链接，它表什么呢？表示我们这个正常的什么呀？哎叫做什么呀，普通的链接，诶直白一点就是什么呀，就是没诶访问过的这个链接啊，没访问链接叫做一个link这么一个伪类啊好，那现在我们来说，那除了link我还想干嘛呢？我还想设置一个，设置什么呢？为我们这个访问过的这个链接设置一个，这个被设置一个颜色，为什么呢？为红色，诶为访问过的链接设置一个颜色为红色，那我怎么设置啊，还有一个伪类叫什么呢？A冒号我要如果写A，是不是还是所有A啊，AA冒号叫一个visited visit叫什么呀？诶访。

访问过的啊，访问过的，所以这里边威表示什么呢？哎，表示我们这个访问过的一个什么呀，链接啊，表示我们这个访问过的这么一个链接，直接来写，也是给他设置颜色，比如说来个color来什么呢？来一个red，诶我这一保存，咱们来看效果，在页面里一刷新走，诶发现什么了。第一个链接是不是变成红色的了，为什么变成红色了，因为这个链接我们是不是访问过的呀，哎，访问过的，而第二个链接还是一个什么呀，还是这么一个绿色的，为什么呀，因为这个链接我没有访问过啊，没有访问过诶那现在就有问题了。访过，诶他怎么知道我访问过，我还是没访问过，怎么知道的，诶他注意了，我们说什么呢？哎，首先这个东西是谁来判断的，浏览器来判断的吧？哎，我们来说浏览器是通过我们的历史记录来干嘛呢？来判断一个链接是否诶访问过啊，是访问过什么意思啊，我这链接是不是有一个地址啊，录下去看我历史记录里如果有这个地址，则判定干嘛呀，访问过，如果没有则判定干嘛呀，没访问过啊，没访过，所以这里边是根据这个历史记录来判断的啊两个属性，一个叫做link，诶正常的链接没访问过的，还有叫什么呀，Wi置叫什么呀，访问过的链接啊，访问的链接，那现在我们来看啊，那这里边link这我们设置一个颜颜色我干嘛呢？我再设置一个来什么，放它size，我来什么呢？50个像素，我一保存一刷新走，你是不是都。

变大了呀，诶可以设置一可以设置大小，但是注意了啊，我把size呢这也设置一个，诶我在visit这设置一个大小，而在另一个这设没设置啊没设置啊保存我们来看啊，一刷新走你诶你发现什么了，没变化是吧？来我换一个换一个这个一百五保存易刷新是不是没有用啊，诶为什么没有用呢？我们来说一下啊，来说一下这里边注意V的这个属性，它这个尾类，它会有一些什么呀，有一些限制，由于什么呢？诶由于我们这个叫做什么呀？诶涉及到了，哎我们这个用户什么呀，隐私问题，所以什么呢？所以使用我们这个visitity的V类，诶visit vied visit v类干嘛呢？哎，只能设置我们这个字体的什么呀。

颜色，哎，就是说我这个visit里边你只能写什么呀，只能写color，其他的属性，比如说你说我想整一什么呀，我想来一个background color来什么呢？来一个yellow，我一保存，咱们来看效果，一刷新走，你有没有用，哎，没有用啊，没有用，为什么呀，就是因为这个隐私原因，就是说他不想让这些东西干嘛呀，太明显了啊，太明显了啊，涉及到隐私问题了，所以这块注意在我们这个visit里边不能设置其他样式，只能涉置一个什么呀，字体的一个颜色啊，自个颜色，因为涉及到隐私问题啊，但是这里边主要说的是一些这个比较比较新的浏览器，但是来看看我们其他浏览器啊，看我们IEIE应该还没问题呢，IE直接看。

阿老师。有点卡是吧？嗯，别着急，四楼IE的时候怎么办？不能着急，IE11它是不是也没有变呀，哎，也没有变，我们来看看我们这个IEIE8 ie8是不是也没事啊，哎，来再看看我们这个IEIE7IE7还没事，IE5呢，I5它是不是显示也没有生效啊，我这不设置一个背景颜色，但是在IE5里边是不是没有生效啊？哎，我们来看看这个IE6吧，我印象里边IE6应该是可以设置，咱们看一下啊，听不太清楚了，找过来。

是不是背景颜色就有了呀，哎，背景颜色有了，但是这可能是我们这个A，它就是它这么一个特性，但是注意这I6里边可能是我镜像里边是能设置的，所以你看到这个背景颜色它就已经干嘛了，变了啊变了，但是这里边注意除了IE6其他浏览器，刚才我们看到这IE5它都它是不是都没变呀，艾他变没变啊，所以注意用我们这个visit只能干嘛呢？只能设置我们的这个字体啊，其他的东西字字体颜色啊，其他东西都不能设置啊，然后再来说，那我们说了A除了这个另个visit还有没有什么其他尾类呢？诶那我们来看看A我们还有没有什么特殊状态呀，注意了，尾类就是表示一种特殊的一个什么呀状态，那我们来说A还有没有什么特殊状态？诶，比如说我们这A你现在看着啊，我这A干嘛呢？我这鼠标是不是可以移过去啊，你发现当我鼠标移过去以后，鼠标是不是变成一个小手啊，那有的时候希望什么呀，当我鼠标移过去以后，你这个链接是不是变一个样子呀？哎变一个样子，那所以这里边我们还有一个伪类叫什么呢？叫做A冒号一个ho啊ho表什么呢？鼠标移入啊鼠标移入诶叫什么呢？Ho这个尾类表示什么呢？表示我们这个鼠标一路的什么呀状态。

什么叫鼠标移入呢？就是说当我鼠标移入到这个超链接上面，上面什么呀，这么一个状态啊，这么一状态，那这里边我来写一个，后边我直接来什么呢？来一个color，我们来一个什么颜色呢？来一个green吧，呃，Green green green，诶那green设置过是吧，Blue有一个叫做sky blue是吧？保存啊来一刷新，现在看着我现在没有移入，是不是没变化呀，当我鼠标移入。

是不是变成蓝色了，哎，变成蓝色了啊，叫做一个后味啊，做一个后味好，那除了后呢，还有什么状态呀？诶我是不是可以去点呀，诶当我鼠标干嘛呢？当然我这链接我这一点咔它是不是就跳转了呀，但是注意还有一个特殊状态什么的，等会儿啊还有一个特殊状态，我这点着干嘛呀，我没松手，那这时候它是不是还有一个样式啊哎，点的时候没松手，点击这么一个状态叫做一个激活的一个状态，还有一个伪类叫什么呢？叫做一个active a冒号一个active啊active来说一下这个玩意冒号act active表示的是什么呀？我们这个鼠标叫什么呀？诶超链接被什么呀，被激活的什么呀，或者叫什么呀，被点击的一个状态啊，被点击状态我直接来了啊，来一个color color来什么呢？来一个black，诶黑色保存，我直接看效果，一刷新看着一点现。

哎，一上去变成蓝的对吧，然后一点走干嘛了，是不是变成黑色了呀，但注意啊，别松手，你松手就嘛了，就跑了啊，一松手就跑了一点是不是变成黑色了呀？诶，Active表示一个什么呀，点击的一个状态，Ho表示一个鼠标一入active表示一个什么呀，点击的一个状态啊，是这么一个东西啊ho还有一个active，那这里边我们再说一个啊，这里边我们说了四个尾类，叫做一个link，普通的链接visit是不是表示一个什么呀？访问过的ho表示什么呀？鼠标移入的active表示一个什么呀，正在被点击的这么一个东西，那现在我们说了这个ho还有active移入这些东西实实实间干嘛呀，不仅仅可以对A用，对其他元素干嘛呀，也可以去使用啊，也可以使用，比如说举个例子，直接来写一个，写一个P标签来，我是一个段落，我一保存，现在一刷新走，你这是一个P标签啊，诶，那我能不能给这个P标签设置一个后面啊来看看。

直接来一个P冒号一个后，后边来什么呢？Background color background color，来一个这个yellow保存，现在来看刷新P标签现在变不变，诶当我鼠标移上去。是不是多了一个黄色背景啊，哎，所以注意这个东西我们也是可以给什么呀，除了A以外的元素去绑定的X，我们来试试啊，看看行不行，直接来一个P冒号，再来一个什么呢？来一个active active来一个换一个颜色，来一个这个orange，保存一刷新走你。是不是也行啊，哎也行，还挺好玩的是吧，哎还挺好玩的啊，所以注意hover和active不仅仅只能给谁呀，给超链接绑定也可以干嘛呀，给其他元素去绑定啊，所以这块我们来说ho和我们这个active，哎也可以为我们这个其他元素干嘛呢？设置，但是这有个问题啊，有个问题来咱们来看看谁呢？看看我们这个直接看我们这IE6了啊，其他我们就不看了，IE61打开走你你看。

我一一入有没有变化，我一点有没有变化，哎没有变化啊，没有变化，为什么？因为IE6干嘛呀，不支持啊，A6不支持，它并不是不支持后，还有active后，你看我这一路是不是也变呀，哎也变它指什么呀？不支持什么呀，超链接以外的元素的active还有后啊，所以这里边要注意叫什么呢？艾叶六中嘛呢，诶不支持对超链接以外的这个元素设置这个什么呀。Hover和这个active啊，Hover和active好，这个是我们说的这么一个四个这个尾类，然后还有一些其他的，我们再一块给他说一下，还有谁呢？这边我们挑一些尾类啊，尾类还有两个，这有一个叫做什么呀。

FOX还有一个叫什么呀？Selection啊，Selection FOX还有这个selection FOX表示什么呀？叫做获取焦点啊，获取焦点什么叫获取焦点呢？来那获取焦点呢，我们这里先写一个东西，我们有一个标签没有讲过，但是我们先说一下，这是跟我们表单相关的，叫做一个什么呢？Input input text等于叫做一个text，这是一个什么呢？这是一个叫做文本框，使用我们这个input可以创建一个文本，输入什么呀，输入框保存，现在我这一刷新一看，是不是多出这么一个东西啊，这东西我这一点往里边可以，是不是可以输入这个内容啊，诶可以输入那个内容，然后我们说一个特殊的状态叫什么呢？我们有一个状态叫做一个FOX fo什么意思呀？叫做获取焦点，那怎么叫获取焦点呀，那你来看，当我这是不是有一个文本输入框啊，当我这一点的时候，你发现什么了，是不是有个光标跟着闪呀，光标闪的时候，我是不是可以去输入这个。

内容了呀，诶输入内容了，这叫什么呀？当我这个光标在这个文本框里闪的时候，就叫一什么呀，获取焦点，那看着我点文本框外边我一点走你干嘛了？公标数没了呀，这叫什么呀，失去焦点啊，获取焦点，还有这个失去焦点，那这里边我就希望什么呢？我就希望当我这个框把获取焦点以后，它可以干嘛呀，可以变一个样子，那怎么办呢？就用到我们那个伪类叫什么呀？叫做FOX啊FOX来我写一下，直接来一个叫什么呢？Input input是不是先选中我们这个input这个元素啊，然后后边一个冒号叫做一个FOX，诶，FOX来我们来看看，直接写一个background color来一个什么呀，Yellow，这叫什么呀？叫做文本框获取焦点以后，修改背景颜色为诶黄色啊，为黄色来保存，现在我们来看效果一刷新变没变？

哎，当我一点进去走，哎，是不是背景颜色就变成黄色了呀，我再点出来。是不是就没了呀？哎，FOX叫做一个获取焦点这么一个状态啊，获取焦点这么一个状态，好那这个是我们说的这个焦点，来看看我们这个IE6 ie6干嘛了，是不是不支持啊，哎，不支持啊，所以这种新的这种比较稍微的新一点，这种东西在IE6里边都是不支持的啊，都是不支持的，好这是我们说的一个FOX，还有一个叫什么呢？叫做一个selection selection又是干什么的呢？来那这selection还有点小，有点意思，你看别的都是什么呀，一个冒号，这个selection干嘛呀，两个冒号，哎两个冒号，你来说一下什么叫selection selection呢，这样啊，我把这个P这个呢，我先给他都注了啊，都注了保存，然后一刷新，现在这个P这是不是没有没有变化了呀，哎，就没有没有样式，我给它我给注了啊，那我们说有什么东西呢？现在这个P里边有一段文字，我们说这个文字有点特点，什么特点呀，当我鼠标在这划的时候，我是不是可以通过这个光标去选中这个文字呀，那么说。

现在我这个一个段落这四个字是不是表示一个选中状态啊，哎，选状态，而我们说的这个selection就是干嘛呢？就是表示这种状态啊，就是表示这种状态的表示什么呀？为我们这个选中的文字来设置样式啊，选中的内容来设置样式，所以这里边我们来看看叫做一什么呀，Selection来干嘛呢？为我们这个诶P标签中干嘛呢？诶选中的这个内容设置样式可以什么呢？诶可以使用我们这个冒号，冒号SE selection为类，表示一个选中内容的一个状态，直接来一个P2个冒号叫什么呀？Selection selection我直接来一个，来一个background color，来一个orange，诶橘红色保存，我这一刷新来走，你一看这儿，哎哟。

那不灵是吧，哎，不灵，来咱们看看其他浏览器，看看我们这个chome。走。CH是不是好使啊，但是在我们火狐里发现这个样，这个伪类是不是并不好用啊，哎，并不好用，然后看谁呢？看看我们这个AIE6就不用测了，这东西肯定不好用啊，肯定不好用，直接来看我们这个IE11稍微等一下啊，刚才不应该关它来看这。是不是也好用啊，但是我们发现这个东西在火狐里干嘛呀，是不是不好用啊，哎，不好用啊，注意啊，注意这个尾类在我们这个火狐中需要什么呢？诶需要采用什么呢？诶另一种方式编写怎么写呢？就不能这么写了，我前面得写一个叫什么呀，杠moz干嘛呢？杠啊杠moz，杠moz表示什么意思呀，叫做抹在了基金会，所以你看到这种样式，这种样式都是什么呀，都是火狐专用的啊，火狐专用的，所以这里边你写了一个moza selection表示什么呀，这个是我们火狐里边那个鬼类的这个便血方式啊，它得这么写，保括存，我们来看，一刷新走你再看。

是不是就好用了呀，啊，就好用了啊，所以这里边注意在火狐里需要使用它来代替。诶，使用这种方式来代替，但是问题来了，火狐狸好用了，对吧，来刷新C里。是不好用了呀，IE点是不是也不好用了呀，为什么呀，因为我们说了，这是莫灾了基金会的这么一个标识，它只支谁呀，只支持火弧，其他浏览器不好用，那怎么办呀？诶如果你需要兼容其他浏览器，你这复制一下干嘛呀？诶你就写俩呗，是吧？哎，这是我们说，诶兼容我们这个，诶大部分浏览器的，而上面这个是兼容火火狐的，兼容我们这个火狐的保存，现在我这一刷新走，你火狐也好用，再来看这儿chome是不是也好用啊，再来看这IE干嘛呀，也好用，哎再来看这IE6呢，它必然是不好用啊，别然不好用，那IE6年后你要想用怎么办呀？得用这个什么了。

GS了啊，就用GS了，所以这个里边呢，I16它很落后，很多东西我们整不了它啊，整不了了，好，那这里边我们说了这么几个尾类，都是比较常用的一些尾类了，有什么呀？有这个link表示一个普通的一个链接，Visit表示一个什么呀？哎，访问过的链接后，表示一个鼠标移入的一个状态，Active表示一个什么呀？正在被点击的一个状态啊，正在被点击注意啊，没松手的一松手还是不是正在被点击状态啊，不是啊，Active，然后还有一个叫做FOX获取焦点，还有一个叫做一个selection文字的这个内容的一个选中的一个状态啊，选中的一个状态，好，这是我们说的这个伪类选择器。