00:00
咱们先学学我们今天的第一个知识点,我们CS萨斯的符合选择器,符合选择器呢,我们这里面先看一下我们的目标是什么,第一个先理解,理解呢,就说我们符合选择器中他们分别的应用场景,就说咱们大家在学的时候呢,脑海里一定有印象,我什么时候用它呀,或者是它在我们实际工作中是怎么用呢,这个要明白。第二个呢,哎,我们讲选择记的时候,一会儿会可能讲五个,但是呢,需要大家重点是记住的,这三个分别是后代选择器,并机选择器和伪类选择器,这三个呢,知道我们怎么去写它们的代码,这是重点学习的,学到这三个的时候呢,大家呢,一定要把它学牢式。好了,那么讲完之后呢,我们先看我们的第一个问题,咱们为什么要用CSS的符合选择器呢?哎,咱前面是不是讲过,咱们CS选择器是不是分为两大类,一个叫基础选择器,咱们上次已经学了,第二个呢,就是符合选择器了,但是在我们实际的工作中呢,我们基础选择器并不能够非踌快速高效的帮我们去选择标签,那比如说我打开这个小米给我来看,那这有一组,诶是不是链接呀,因为我鼠标放在盒子上可以去吗?盒子鼠鼠标放到服务上可以去,到服务上这是有一组链接,那这儿呢,还是一组链接。
01:16
而且这链接的个数可不少呀,这个大概是十个,这个呢也是有十几个,那你想想他们的风格,你看看一样吗?不一样,这一组A是黑色的,这一组A是白色的。那你想你把这两组A,你想跟他们选出来,那你会怎么选?那以前咱们是不是就用过。标签选择器和类选择器啊,那么标签选择器肯定排除了,因为它两个两组A是不一样的,那类选择器呢可以实现,但是呢,我们说了它不能快速高效的去选择,因为啊,这里面有十个A呀,你想给他改个样式,是不是调用十次class啊,这个A选择一个class,这个a class,那是不是会很麻烦呢,并不能快速高效,那此时呢,我们就怎么办呢?想到了一种新的方法,叫做符合选择器,所以说呢,符合选择器是更准确更精细的帮我们去选择我们想要的标签。
02:09
快速高效的啊,那再一个呢,你看符合选择器,看字面意思就知道是不是一个什么呢,它其实就是由基础选择器呢,来了个组合,其实叫组合选择器,理解会更好一点啊,不过我们习惯性叫复合选择器,其实你理解它就是通过基础选择器的不同组合而成的,好,这是我们说的为什么要用符合选择器,就是为了更准确更精细的去选择我们要的啊,那我们先看我们的第一个叫做后代选择器,诶,这个可是我们今天中的重点中的重点了,希望我们大家呢,把这个一定要学明白,好我们先看一下,先看一下需求,就比如说刚才我们说的这一组A是不是一个样式啊,这一组A是不是还是一个样式啊。那你想想,我们在写的时候呢,这个A也不会平白无故的就出现了,一般情况下是不是会拿一个负盒子把它们套起来?
03:00
对不对啊,然后呢,这个盒子里面这个A这个样子,这个盒子里面的A是这个样子效果好了,那我给大家演示一下我们怎么去做这个东西。好,我已经事先建好了编辑器里面建好了这个页面,那我们就可以这么来写,同学们还记不记得我们前面讲的element语法,Element语法啊,点na是不是生成一个div跟nay啊,这个nay里面呢,有三个a oka乘以三是不是有三个A了,按table键,然后呢,输入井号,在这里面我们写上一个叫做哎,内部链接。这是内部链接,还可能呢,有的A呢,没有套负盒子,我就直接写到外面来了,A同样道理呢,它也乘一个三,OK,也是有三个,还是呢,输入井号到这里面去啊按住管往下一拉,输入一个外部链接,好,那这样是不是有个内部链接和外部链接了,写完之后呢,我右键在浏览器中打开走,这是不是是不是已经有了,那我就按照我们刚才的需求,我就想着把什么呀,内部链接里面这个字呢,改个颜色。
04:02
好吧,也就说我想把内部链接呢,都改成pink色好吧,啊,那外部链接我不改,那这时候呢,有的同学又又回来说了,哎,第一个呢,我们这个已经排除了标签选择器立马就排除,因为你这么一写,是不是所有的A都会变颜色,哎,这个不可以,那有的同学老师我用类选择器这个可以对吧?哎,点比如说我们写这个点red可以写啊写完之后呢,它class调用就可以了,但是呢,你有没有想到一个问题啊,刚才咱们分析的这的链接是不是很多很多啊,那你要挨个去调用。哎,会很麻烦,虽然能实现,但是很麻烦,这时候呢,我们想快速高效的去做,这时候呢,我教给你一种更好的方法来做好吧,哎,他是这么来写的。那我们先我先问啊,请阁下留下你的姓名,哎,这时候呢,我会说我乃常山赵子龙。哎,我这么来说的,那我再告诉你我是赵子龙的,同时我还告诉你,我叫常山赵子龙,是不是告诉你一个归属地呀?哎,先说大的,再说我们小的地方,你到长山就能找到我,那同样道理呢,这里面有A,它也有A,那我写的时候呢,我是按照这种格式来的啊,就是点nay,长山里面的赵子龙里面的A就可以了,诶有没有注意我这种写法,点nay是不是先写了他的父亲A,然后呢,是不是写了里面的孩子,咱们是不是经常这么来说的,对不对?问你你是哪里人呢?啊,你是常山赵子龙对吧?或者是你问哪里人呢?比如说我是哎山东,哎济南人。
05:27
几来,那我们说一说呢,是不是先说那个大的省份,再说里面的市份,是一个道理一个道理啊,那我们先把父亲写完,再写里面的孩子,这样就可以搞定了,记住用空格隔开,然后写完毕之后呢,我们再来给个颜色color,来一个pink,好,我们写完之后呢,跟我来打开浏览器刷新,看看可不可以走,哎,是不是非踌快的啦,我一句话是不是就把把这个立马就显示出来了,它比类型择器是不是更快速高效呀,这就叫做后代选择器,为什么成为后代呢?因为A是div,也就是这个nay的什么儿子,他是不是就是他的后代了?哎,所以它可以变颜色,老师,这个A为什么没有变颜色呢?
06:10
因为这个A呢,没有爸爸,或者说他没有妈妈,没有没妈的孩子像棵草嘛,谁管他呀,对吧?哎,所以说你看我这呢,加了一个相当于限定的意思,告诉你,你得有这个navy,然后呢,有A才才能变颜色,你这个因为外层的没有navy,所以它不变颜色。好,比如说呢,我再举个例子,同学们跟我来写一下,就是UR呢,里面有一个立,这个咱们是不是学过呀,成立个3OK,那这呢是不是有一个立,那我写成两个字叫什么呢?哎,一条狗好嘞,这已经有了,然后呢,我再准备一组ul,但是呢,我要给他加一个父亲啊,就是加一个外层的标签,叫什么呢?点王思聪OK,这个都认识对吧?王思聪呢,也养了一条狗,他那狗呢,有一个名字啊,UR里面有利,然后呢,再乘以个3OK,那王思聪的狗呢,叫王可可啊。哎,这个狗竟然起了个名字王可,可是一条狗,我是不是已经写完毕了?OK啊,这狗可不普通啊。哎,想当年这条狗过生日的时候,王思聪买了十几部iPhone手机给他啊,好了,当然他不能用而已。
07:12
好,我们在浏览器中再打开一下看一看,那我想做一个很简单效果,霸王可科是一条狗啊,给它变成一种红色,好吧,那就说这个不变,让他来变,谁让他是王思聪的狗呢?那你来写的同同学们跟我一起来写一写,应该怎么写呀,应该是点什么呀?王思聪里面的对不对?它里面的ul,然后它里面的里这样写是不是就可以了?好,Color,然后选择里面的red就行了,这么来写是不是王思聪这个标签里面的ul里面的力是不是顺着这个一层一层的去找就OK了。好,写完毕之后呢,我们CTRL加S保存一份,然后呢,我们刷新看效果走,哎,果然是一条,果不是,果然已经变成红色了,对不对,那这就是我们讲的后代选择器好了,那么我简单把我们的后代选择器呢给大家来总结一下啊,后代选择器呢,又称之为包含选择器,那你知道它为什么叫包含选择器了吗?就是因为是不是父亲包含了孩子呀,哎。
08:10
然后可以选在你们的子孙后代啊,他的写法就是把外层标签呢写在前面,内层标签呢写在后面,中间用空格开,也就是说父集写在前面,子集写在后面中间,必须必须用空格给它们隔开就可以了啊好了,那么再一个呢,就说是我们常见的语法格式呢,就是一般前面的情况加一个类选择器,后面加一个标签选择器,比较常用的一种写法了啊啊然后呢,再一个就我们也知道,只要是发生了嵌套,内层的标签是不是就是外层的后代呀?啊,这个也就我们就明白了啊,也就说是A肯定是div的孩子,就这么来说,那这个就是我们讲的后代选择器,那它最大的优点是干什么,可以快速高效的帮我们更加精确的选内容,这个比比我们的类型的气还要更快捷一些。
我来说两句