尚硅谷前端基础 (34)

好，说完这个属性选择器以后，我们这些基本的选择器就就差不多了，对吧，那接下来呢，我们再往下来说，再往下来说，我们直接对照着文档来说啊，刚才我们上边说的其实是这两这两栏啊，这两栏一个关系的，还有一个是我们这个简单的一些选择剂，然后再往下边呢，我们还有这么两栏啊，叫做一个呃，C class，还有叫做一个c elements啊这两种选择器，那我们先说第一个，第一个我们称为叫做尾类选择器啊，伪类哪个伪就是那个虚伪的那个伪甲的那个伪啊伪类，诶类就是我们那个类别的类，叫伪类选择器，第二个呢，我们叫伪，这个C就是伪的意思是吧，这叫elements，这个叫做伪元素选择器，伪元素选择器他们的一个区分的话，你就看一下，其实他们前边都带冒号，都带冒号，尾类带一个冒号，伪元素带两个冒号。所以如。

如果要区分的话，你就看一下冒号的数量，一个冒号就属于伪类，两个冒号就属于伪元素，但是这两个东西我们没有必要去过分的去区分啊，没有必要去区分的那么那么细致啊，那么细致，其实整体来说都差不多，我们先来说伪类，待会儿再来说伪元素，在这里面我们来新建一个文件，我们叫一个零七，我们叫做一个伪类选择器，呃，伪类类我们都知道，类是不是就是我们这个class对吧？类就是我们这个class，那什么又叫做这个尾类呢？啊，什么叫尾类呢？在这儿我们先把它运行起来啊，然后呢，我们这写一个这个写一个这个ULUL的话，我们写的话先这么写，Ul是我们说的一个无序列表，然后里边是不是可以写Li表示我们的列表项啊，哎，我们之前是是这么写的，对吧，之前是这么写的，那现在其实我们学了选择器以后，我们来看看ul跟L。

R它实际上就是一个父子关系，我要想表示u Li里边的Li，那是不是就是u Li大于Li啊，诶u Li大于Li，所以这个时候我们可以直接写一个u Li大于LY，然后摁一下table键，它就会自动生成一个u Li里边包含有LY这样一个结构啊，再看一下啊，我们直接来一个u Li大于Li，然后table键就会自动的去生成这个结构，所以这个就是我们一个这个这这这这个这这这一个插件，就是我们的这个Vs code里边自动给我们装好一个插件的一个iit，它特意给我们干的事儿就是它可以直接根据你的CSS选择器来生成什么呀，来生成这个标签，你说我这来一个ul加上一个ul，那这个就生两个ul，两个ul的关系就是一个兄弟啊，就兄弟这么一个东西啊，好，我们先不规划了，我们直接来一个ul，比如说ul里边我想放五个Li，那我可以怎么办呢？我可以。

直接u Li大于Li，然后星号来一个五啊，星号来一个五，那这个时候效果就是UI里边包含有五个LY，就这么一个效果啊，所以我这写一个第一个，哎，然后呢，下边这个是我们这个第二个。哎，第二个你注意，我可以直接按table键去切换到我们下一个LY中间啊，第四个，然后第五个啊，第五个我们简单一点写，就写这么五个Li啊，就写这么五个LY，那这个时候我们直接来写一个style标签，我现在想干嘛呢？我想做这么一件事，我想将我们这个ul里的。哎，第一个Li设置为什么呢？设置为红色啊，还是字体设置为红色，那这个时候我们一想u Li里边的Li，我们是这么写的，Ul里边的Li直接大于号，然后来一个Li Li直接来一个color，来一个这个red，那这个时候它里面的Li就自动变成了红色，但是问题来了，我写这个大于Li表示什么意思？表示的是ul里边的所有子元素LY，也就是说不一定不仅仅是第一个。

第二个第三个，第四个、第五个是不是全都会被选中啊？所以你会发现效果就是他们全都变成红字了，而我的要求什么？要求是只让第一个Li设置为红色，而第二个、第三个、第四个、第五个需不需要变？哎，很明显是不需要变，那这里我怎么能表示第一个LY？诶，那其实我有一个最简单的方式，我可以直接给这个LY加一个class，比如说我叫FLSD，叫做一个first，那这个时候我就可以直接加个限制Li，不行，你还得Li点一个fire r ST，也就说你不，哎first呢，是不是就是B的意思I第一的，也就是说哎，你不仅仅得是子元素LY，你还得是第一个，所以我直接写那个点first，这时候效果是不是只有它变红了，而别的就没变红了？哎，没变红，那这样我们就可以满足我们的需求，只选中第一个。通常情况下，我们这么做是可以。

解决问题的没问题啊，通常情况下，大部分情况下都可以解决问题，但是唯独会有一些特殊情况，什么特殊情况呢？就是当我的这个结构上不太固定的时候，比如说拿我们这举例子，我这Li就一定是第一个吗？一定他是第一个吗？哎，有可能后来我改一个结构了，我改了，我前面又加了一个LY，哎，这个LY干嘛呢，这个LY它比一。这是什么呀，这是第零个啊，这是第零个，那我这又整了一个第第零个，那这个时候你注意了，这回亮的还是谁，是不是还是他呀，这个东西亮没亮没亮，为什么。因为class是不是还在第二个上面，第一个上面有没有class没有，而我们要求是让第一个Li设置为红色，第一个Li现在是不是他呀，哎，并没有选中，所以我们说了，我这写个类行不行，写个类也行，但是写类呢又不好，因为什么你写完类以后，你的类和这个位置就耦合了，也就说你每次加第一个元素的时候，你都要给它一个class叫first，并且还要啊把其他类上那个class first给它去掉，那这样我们写起来是不是就比较的比较麻烦呀，所以我们就希望有这么一个东西，我自动选中什么呢？选中第一个元素啊，自动选中第一个元素，那这样是不是最爽，哎，最少，所以这个时候我们就要说一下，不能加class啊，不能加class，所以这时候我们就要说一下，是我们叫做一个伪类。

伪类，伪类是干嘛的？伪类也就是说白了就是什么呢？就是不存在的类，诶不存在的类或者叫做一个什么呢？叫做一个特殊的一个类，所以伪类用来干嘛呢？诶伪类用来描述我们这个一个元素的什么呢？特殊状态啊，它是用来描述一个元素的特殊状态的，比如这个元素什么呢？哎，比如第一个子元素，哎比如什么呢？诶比如什么呢？比如我们这个呃，被点击的元素，哎比如什么呢？哎，比如鼠标移动的这个，诶鼠标移入的一个元素，诶移入的元素这些实际上都是什么，都是我们元素所处在的一个特殊状态，也就是说像我的这个LY，它可以成为第一个，这个是不是也可以成为第一个，哎，他们随时。

而都可以成为第一个元素啊，每一个都可以成为第一个元素，但是呢，我如果给它加一个class，变成for，那就意味着它是不是就固定是第一个了？哎，所以我们要找的是什么？我要找的不是拥有，拥有什么呢？拥有force的这个class那个元素，而是找什么？而是找那个处在第一个子元素这个状态的那个元素，懂意思吗？它处在这个状态，就说我要找的呀，像这种情况我要找Li，而且这个Li还得是第一个子元素，我是要找的是这个状态呀，而这个状态我们没有办法通过我们手动去添加一个类去表示，或者能表示，但是不严谨，有问题，所以在我们CSS里面给我们设计一个东西，叫做伪类，专门用来表示特殊状态啊，我们来体会一下，那我们来说一下伪类的特点。

哎尾类，哎尾类一般。哎，情况下都是什么呢？都是使用我们这个冒号开头啊，使用冒号开头，所以你一看冒号开头十有八九就不是说有基全都是伪类，但是有一些伪元素也有可能用一个冒号开头啊，也有可能，但是基本上全都是伪类啊，现在基本上一个冒号全都是尾属于伪类，那所以这里边我们要说第一个伪类冒号叫做一个first的child first叫什么叫第一个，第一个child叫什么呢？叫子元素啊，叫子元素，所以看着了我这个时候Li下边我同时加一个冒号fourth的child for child，这时候你看效果是不是第一个只有第一个红了，其他的是不是都没红，为什么？First child就表示第一个子元素，那它就等于我用这个东西给前边这个Li加了一个限制，你这个Li你得什么？得是u Li的子元素，同时你这个Li还得是第一。

个子元素第二个都不行，那这样的话就只有第一个变了，但是问题来了。

它跟刚才那有什么好处，你看好处就是我有没有在这Li上加任何的标识啊，没有他自己选的好处什么，当我把第一个删了，这个变成第一个了，是不是它就红了，哎，当我把它又删了，第二个变成第一个了，是不是第二个又红了，哎，所以它就是一个这么一个特点，它总可以确保什么呢？第一个元素红，所以first child叫什么呢？叫做第一个子元素啊，第一个子元素都一个fourth child啊，非常简单，好，我们这复制一下，再来看一下，呃，Fourth child还有一个类似的，我们叫做一个last child last child什么意思叫最后一个子元素，你看我删了第五个，第四个就红，诶，他总可以确保最后一个元素红啊，所以last child叫做最后一个子元素。最后一个资元素，然后再往下看，还有什么呢？还有一个我们叫做一个n th child，哎，我直接改了啊，直接改了我们叫做一个n th child n th child你看啊，这个比较特殊，它里边会带一个括号，N th child是干嘛的？哎，我们想一下，其实在我们英语里边NTH是干嘛的，就是N嘛，就是任意数字啊，N就是任意数字，TH呢，就是我们把12345这种数字换成第一，第二第三第四，是不是一般在英语里就加一个这个，加一个这个TH对吧？哎，Y就是EST嘛，是吧，就加这么一个TH，表示它就是一个D几D几D几，所以NTH就是DDN的啊，就是DN的，所以这个就是什么呢？选中我们这个第N个子元素啊，选中第N个子元素。所以这我写个。

NTH，它是有一个括号啊，括号里我写个一，那就选第一个子元素，我写一个二，就选第二个子元素，我写一个三，那就选第三个子元素，懂意思吧，这叫做一个n th h child的，也就说他可以想选哪个就选哪个啊这个用法啊比较特殊，它可以填几个特殊值，比如说我这直接传一个N，我直接写一个N啊，我直接写一根什么效果是不是全选中了，哎，全选中了，所以我们这说一下，我如果直接写N，我们说特殊值，特殊值我们如果直接写N，写N就表示什么呢？表示DN的的范围，N的范围是什么呢？N的范围叫做。

哎，零到我们这个正无穷啊。哎，零到我们这个写无穷，看能不能打这个符号啊无穷。无线呢？我那个特殊打不出来，我们就直接写吧，就是零到我们这个正无穷，所以我如果写的是N表示什么呢？我选中第零个，选中第一个，选中第二个，选中第三个，选中第四个，选中第五个，也就说零往后的全都选中，所以注意N的取值范围是从零开始的啊，是从零开始的，那这里边我还可以写什么呢？我还可以写一个2N 2N表示什么意思？2NN的范围还是零到正无穷，那2N就是什么呢？你看第零个，第一个就没选中，第二个选中了，第三个没选中，第四个选中了，那这什么意思？诶2N表示什么呢？诶表示选中我们这个偶数，哎，胃的这个元素啊，什么意思？N它的值还是1012345这么变的，那2N呢，2NN等于零的时候就是零，那没有零对吧？没有零就不管了，N等于一的时候，2N是几？2N是。

二那是不是选中第二个了，哎，第二个了，N等于二的时候，2N是四，选中第四个N等于三的时候，2N是六，选中第六个是不是以此类推啊？哎，所以2N表示选择偶数位的一个元素啊，偶数元素，那还有一个我们就可以写一个叫2N加一，2N加一那就是一个奇数位，这跟我们数学那是不是一样了？哎，2N加一这是什么呢？哎，表示选中我们这个奇数位的一个元素啊，奇数位的一个元素，那同样的话，其实除了这种写法，我们还有一些特殊写法啊，我们可以直接写什么呢？在这里边我可以直接写一个ODD啊，我直接写一个ODD，这时候你看135。

是不是就亮了诶2N加一刚才我们看了对吧，ODD，所以我们ODD也是一样的，所以2N加一或什么呢，或ODD它都表示的是一个基数位135，所以你看啊，我这写2N加一跟写ODD是一样的，保存效果是不是一样啊哎，都是135，还可以写什么呢？Eve en even我们来看叫什么呢？偶数，你看246就偶数，ODD就是奇数，Even就是一个偶数。

Even就是一个偶数，所以2N或者什么呢？或者EV，它是一样的啊，一样的，这个是我们说的几个这种特殊的位置啊，特殊的位置好说说这三个啊，First child last child，还有一个叫做n th child啊，N th n th child，这几个算是特殊的吧，是吧，特殊的然后还有一个点我们需要注意。我们的这个ul这个比如说啊，我们拿这个force来演示。First child找的第一个对吧？找第一个要注意啊，现在啊，我在ul里边，我放一个死弹，反正一般情况下不会这么做啊，但是我还是放了一个啊，我是一个死弹，我是一个死板，那这个时候你注意了，我把这个死SPA写上以后，你看我这堆Li有没有红的。

没有一个红的，第一个Li是不是也没红啊？诶，我这不是写了吗？Li冒号first child first child就是找lil，还得是第一个子元素啊，那我们来看ul里边这个LY是不是第一个。很明显不是，前边是不是还有一个死SPA呢？哎，前面还有一个死SPA，死SPA是第一个，但是它这有限定条件，限定是什么呀？Li，第一个子元素Li，那你一个子元素是SPA，是不是不满足条件呀，所以SPA就没有红，所以注意我要说的是一个什么问题，我们所说的first child last child n th child这些。尾类他们的排序都是干是干嘛的？哎，这些尾类，以上这些尾类都是什么呢？都是依据我们那什么呢？所有根据我们这个所有的子元素进行排序啊，它是根据所有的子元素进行排序的，也就是说你是第一个子元素，这第一个指什么？不是说你是第一个Li，而是什么你得是所有元素里的第一个啊，我有100个元素，有什么div，有什么SPA，你得是所有元素里第一个，也就说我这个时候这四个这这几个玩意儿，这三个玩意儿是不是都要考虑D所有元素，哎，那同理，跟他们类似的还有一个叫什么呢？叫做一个first of type，叫做一个last of type，还有一个叫做nth of type，这。

跟这几个它是对应的啊对应的，那我们说了它们的功能。

哎，这几个。尾类，哎的功能和什么呢？和上述的类似啊，和上述的这个类似，唯一不同的啊，不同点在于哪呢？不同点是哎，它们是在我们这个同类型元素中进行排序的啊，进行排序的，所以我们简单说一下同类型的排序first of type什么意思，也是找第一个子元素是什么，是同类型里的第一个，也就说比如说我这写一个first of type，那这个时候你看我这个LY就红了，那他没有考虑败，为什么？因为他是找的同类型的，诶他不考虑不同类型的，你说我要找的是第一个败就完事了啊，第一个败，所以跟上边正好反着，就是上边那个什么child first child，所有的什么什么什么child，它都是。

什么呀，按照我们这个所有元素去排的子元素嘛，诶所有子元素，而我们这个first of type，只找我们这个相同类型啊，只找我们这个相同类型的，所以这个待会儿要注意一下，举个例子，这就像什么，就像我们过去的家庭，现在可能子女多的比较少，过去家庭可能子女比较多是吧，可能一些老人是吧，像我可能我知道可能一家子可能有有七个孩子，七个孩子里边有三个女儿，有四个儿子对吧，那这个时候可能我们在说排序的时候，可能说这是我们家老大，这是我们家老二，这我们家老三，这我们家老七，那可能我这个七个孩子老大，老二老老三，老四，老五老老七，这是不是就我家我不分男女，是整个一个大排行啊，哎，整个一个大排行，所以我们这个child就是一个大排行，什么fourth child，老老大，我不管你男女，只要老大就行啊，Last child也是最后一个，不管你男女，只要是最后一个就行啊，这是fourth of这个child啊，Child啊，Child，一系列的child，然后我们这个一系列的这个of child。

是什么东西属于小排行啊，比如说我们除了说老大，老二，老三，老四老五，我可能说这是我大儿子，这是我大闺女是吧，这是我大啊，这是我二闺女，这是我二儿子，我是不是要在女性的子女里边排序，在男性子女里边可能要排序啊，哎，大儿子，二儿子，大闺女，二闺女，这样我是不是还要做这个小的排行，哎，在女儿里你是老大，在我们的儿子里你是老大，他这么去排，所以这个东西也是同理，我们这个等等的一系列的child，他是在。所有元素的排序，而我们这个off type，它只在什么呢？同类型当中排序，就这么一个区别，注意区分一下，后边我不演示了，待会儿你自己试一下这个东西，感受一下，一写就明白啊，一写就明白，然后我们再看我们这个呃，尾类还有什么啊，还有什么？哎，当然还有很多是吧，还有很多我们就不一个一个的说了，我们还有一个要说的就是我们这个，呃，比较常用的一个叫做not啊，叫做一个not not它是一个什么呢？Not叫做一个否定伪类。

Not啊，也是一个冒号开头冒号，Not这个叫什么呢？叫做否定伪类。哎，否定伪类，它说白了它的意思就是除了啊，就是除了将什么呢？哎，将某些，哎，将我们这个符合条件的元素从什么呢？哎，从我们这个选择器中。去除，哎，从我们这个选择器中去去除，就这一个意思啊，就这么一个意思，那什么什么什么效果呢，我们直接看这现在还是拿这个Li举例子啊，我把这都住了，那现在我想干嘛呢？我想给我的Li啊，都设置一个背景颜色，我们直接来一个Li Li，我们来大一个Li，我们不设置背景颜色吧，还设置自己颜色，我直接来一个color color，我们来一个这个这个颜色吧，设置完了啊，那这样，哎，这个颜色有点那什么，嗯嗯，我们来一个yellow green啊yellow green yellow我设这么一个颜色，现在的话，它的效果是我所有的是不是都变成了这个这么一个绿色，对吧，那现在我想干嘛呢？哎，我想除了这个，这个写的是第二个，实际上Li里排序是第三个，除了谁呢？除了第三个那怎么办呢？除了第三个那怎么办呢？诶，那在后边我就可以直接跟着一个冒号来一个闹。

Not，谁呢？Not，我直接冒号一个这个，诶叫做一个这个Li，冒号一个这个n th child child谁呢？Child，我们直接来一个三，那这样我们来看一下。

这样的效果啊，当然我这那我这又不应该写这个。LY，哎，我直接写一个啊n th child的，那这Li我写完了以后，它就等于它找不着了啊找不着，因为我这多加了一个限制，所以这个时候这LY我就可以省略不写了，因为前面是不是已经有L了，所以这LK不写了，我里边直接写了一个n th child的child一个这个child一个三，那这表什么意思呢？哎表示说哎首先这是不是选中所有的Li，哎选中所有Li，然后not在这就表示什么呢？除了除了第三个啊，除了第三个，但是你会发现什么呢？它是把谁变了，是把这个东西变了，为什么把它给变了，因为我们说的我用的是child child是不是还是大排行，哎，它是在所有的元素里排，那这样它是不是就是第三类，哎如果我换成什么呢？我换成n th of type来一个三，那这个时候选的就是谁，就是他，哎，只有它不变，也就是说我要把这第三个从哪从这堆。

符合条件里边的给它去除出去，所以not我们叫做一个否定伪类，叫除了，把这些符合条件的东西给它去除掉，我不要了，哎，我把这些你我可能单独设置对吧，把你刨除出去，我要给别的东西去设置好，这个是我们说几个简单的尾类，其实不少，但是其实都不难啊，哎，First child last child n child啊，First of type last of type n of type，还有我们的note否定尾类，自己先尝试使用一下，当然还有一些尾类，我们待会还要接着往下去说啊，这里我们先说这么多，停一下。