00:00
下面我们来看另外一个选择器啊,这种选择器的种类方法,选择器的种类是比较多的,叫什么呢?过滤选择器啊,首先我们还是跟大家强调一遍,过滤选择器是对原有的选择器的匹配的元素进行什么进一步的过滤,什么意思呢?我们来看一下这里面好几种,我们不用去再去仔细的看了,看需求一个个写。这里面比较多,因为那个过滤选择器数量是比较多的。哎,把这个。好,接着给他。这时候啊,这样等一下行调一下,我们来一个看啊,搞法还是跟刚才差不多,我把那个准备工作先做好啊,点CSS background还是红色吧,红色最显眼,好,现在我们来看,选择第一个div,我们看一下这个结构,这个结构其实非常简单啊。
01:12
啊,这里面有好几个D是吧,有一个失败啊,有一个U,有几个I,好像跟刚才差不多啊,差不了太多啊,这里面都没什么样式啊,大概本身是这个样子。啊,下面我的我想要做的是什么。中他,因为他div嘛,选中第一个div,你说老师用ID当然可以,我现在不想用ID了。能不能做到了,来来,首先我的确定他是要找第二位。对不对,但是这样的话是不是找到所有的第二位啊,关键我现在只想找到所有中的什么第一个,这不就是功率吗。
02:00
那现在我们就来看看这里面有没有找第一个的过滤冒号,什么first,那也就是说在这一个标签选择器的后面加上一个固定选择器,写什么冒号first。简单吧,啊,很好理解,来,我们来看一下走里这不行可以是么意思?好,那这个我们就过去了,把这一个复制一下,把这个结构复制一下,等好了把这一个你们一删,我们来就来看了,对不对?下面什么更简单了,选择最后一个class为box的元素。那首先它的落脚点是什么?是不是点box?对不对,但这个点box是不是可能找到多个。
03:00
那他需要的是什么,最后一个,那你说最后一个用什么,我都不用去看了啊,因为比较简单,好现在我们就要先观察一下。为box的有好几个,大概一个两个三个四个对不对,那因为他要找最后一个,那不是显示的他被选中吗。就这意思吧,好,我们来一刷,验证我们的观点,OK,对的,没问题。好,下面我们再来一套啊,再来一套。下面要做的事情什么呢?我们来看看啊,是class属性,不为什么box的div,首先得说是什么div。是吧,他说什么class属性不为box,要为box就好了,我是不是就这么写,是不是他说不为box。
04:09
那我们来看一下有什么什么是不是骆驼呀,冒号骆驼把那个里面,我刚才写的是不是写在里面就可以,你说我该怎么写,怎么写冒号not接着呢,括号么。能不能懂,我能懂,那行,那来看一下,这里面就有一个。有,有两种可能性,你看啊,Class不为box的,那我就问了,他有class吗?它有class吗?是不是就两种情况啊,你class不为box,那你class为别的值。这个是肯定能匹配的,对不对,关键是我没有能不能匹配。
05:04
能不能懂,我们没有class是不是也有可能呢?好,我们来看一下啊,Class为box的,刚才是不是找过。是吧,刚才不找过了吗?有这么几个好,我们来看一下,是看它最终诶。现在啊,现在找一下只有这个什么,他找div是吧,那div的话那就很明显了,就是么,大家看到这样的价位,总共就这几个,是不是我box是不是前两个,最后是不是剩下它了,也就是说我可不可以没有box。可以吧,你不就是说。是吗?你的class属性不为box吗?那我box我class没有是不是不会box,那也那也是啊对不对是吧。
06:00
那有人说,老师,我还希望它必须有class属性。是不啊,这个我们还没学,后面才知道啊,后面有要求有属性的。嗯,那我们暂时就先做到这里,这个可以吧,没有太大问题是不是啊,没有太大问题,这个你要知道啊,没有拉属性也可以对吧,要强调一个问题。也是么,是不是也可以,嗯,好,下面我们看这个。啊,这个有意思。你什么意思啊,他说选择第二个和第三个ii。来看一下选择第二个和第三个ii,那不就是选择这两个吗?是吧,但是你要按照他的要求去选啊,那首先我们找到所有ii可不可以,因为这里面就就一套ii就一套就ul下面的I对不对,别的位置没有了吧,那我直接写IK行,关键是吧,我要从中过滤出第二个和什么第三个,这个就让人受不了了。
07:19
不管他,先来找一找,看看哪个比较合适。看都有什么啊,这个even和old是什么?偶数奇偶数指什么呢?指下标。啊只下标,我们内部的内部的动物元素是不是有下标的呀,它尾数组嘛,会有下标吗?OK,关键我们不是看奇偶数啊,是看奇偶数嘛,一个三一个四是一个二一个三还是一个三一个四啊一个二一个三,这没有什么奇偶数,又有奇数又偶数是不是没看了,看看还有什么一口,诶这个是什么,是不是找某一个。
08:01
是吧?这不找某一个吗?Equal equal什么意思?是equal?一会什么意思大家知道吗?相等的意思,看它什么意思,匹配一个给力索引的元素。这是匹配某一个元素啊,而我现在要什么?是评分两个,这个好像也不太合适。看看这个是什么呢。一个叫冒号GT,一个叫冒it,看一下诶,它是匹配所有什么大于给定索引值的元素,那另外一个啊,大家推测出来了是小于,诶这个好像可以用哎。这不求区间嘛,是不是,而我刚好是一个连续的两个嘛,那我应该怎么写呢?大家看啊,来回来看一下,先用先用大于吧,大于是冒号GT是不是冒号GT括号来写一下冒号GT框大于几了,这是下标啊,大于零,大于零不就是第二个了吗?
09:19
对不对?下面问零是第一种,我要大于零,不就刚好从二和起吗?能不能理解有一个够了吗?够不够不够?它还有什么小于三,那就LT,其实它这有提示看到了吗。这个这选择题写这都有提示的,大家也不用担心记不住啊,OK好,这个写什么呢?三是吗?你看嘛,第三个元素的下标是几,下标是几,第三个元素的下标是二,但是它要小于小写小于三嘛。
10:00
是这意思吧,你大于零小于三不就一二吗?你下边为一啊,不就是第二个和第三个吗?对不对,很对呀。没毛病吧,但是。啊,我们来看一下,走一不对,看他选择几个,这不有病吗。其实没有病,是咱自己想错了啊,它是一步一步过滤的,大家想啊,我一共有几个II6个是吧,那也就是说我他是一个一个执行的,先他执行这个选择器,找到几个II6个,我就这么画一下啊,是六个吧,六个你接着说什么大于零。
11:00
找到这一遍是吧,接着你又说什么小于三。能不能懂,我们刚才是这么想的吗?不是,我们刚才没没有这么想,我们以为他们是一起执行的。是不是我们以为这两个过滤显示器前后这两个过滤显示器是不是同时执行才行,但是同时执行的吗?不是,你根据这个结果你能看得出来,那我应该怎么做呢?小于姐小于二。是不是啊,来看一下。各位可以,哎,你说我能不能,我能换一种写法。我换一种写法。我先说小鱼,再说大鱼。没有。各位,这行吗?这个时候就要穿什么。
12:07
比如说怎么先说小鱼再说大于就三了呢,你得看嘛,它一步一步执行呢,其实这个这个你画个图一点一点看就很明白,说实话这这难度不大啊,难度一点不大,我先说小于三,小于三不就这三个吗。是不是接着说什么大于零,那不这两个吗,不刚好吗,对不对对的啊,这个还这个还真容易,有时候一不小心就犯错误了,尤其是在有些题,如果考这种问题的话,他就容易故意设置的陷阱让你写错。啊,OK,说白了,通过这样一个例子,我们要知道,多个选择性是依次执行的。不是同时执行的,对不对啊,多个过滤什么选择性不是同时执行的。
13:09
啊,21次。那一次的话就是第二。这一次过滤的前提是不是上一次过滤的结果啊,这个要注意啊,这是要注意的地方,行,那这一个搞定以后呢,我们就看下一个了。啊,来试一下,这说说的是一个什么意思,他说首先得落脚点找什么,哎哎。但他要求ii的内容,为什么BB对吧?哎,看ii里面有BB的吗?是不是有一个。表还有一个这个哦,下面还有一个是吧,那就两个,那我这个地方怎么要求我的内容是不是了,看文档。
14:07
它叫什么内容选择,诶这里面有个什么content content什么意思,包含看这个,也就是说找第。要求这个div里面的那个标签的文本是什么,做包含作用就行,好像是。好,来,我们来写一写。啊,其实非常简单啊,这都不难。冒号是吗?看啊,这个里面应该是不是要写写字符串呢。所以我写什么呢?单引号行不行,不行,得用什么双引号了。看懂吧,哦,还有一个力是吧,来应该有两个匹配的吧,走里啊,一点问题都没有,好,我们再往下看啊,再往下看,这都比较简单啊,说清楚就明白了,你不用想着现在背啊,背一点用都没有,不用背。
15:19
我们继续往下看。他说选择隐藏的什么,哎,首先是AI,但他要是什么隐藏的,这里有隐藏的吗?我们看一下有没有有。能看到吧,有那有的话来看一下,那我怎么找嘞,看一下啊。呃,下一个叫什么可见性,有冒号黑等,这说明什么隐藏的功率,而这个什么可见的功率我应我应该用哪个,我应该用黑的,那我应该怎么写呢?那我应该写冒号黑的,但这有意义吗?有没有意义?没有意义你都隐藏着,你加了样式有啥用呢?
16:11
是吧,没关系,我可以把这个打印输出一下嘛,他是不是就哎我这个地,我这个地方把他的我也不太好直接去疏离啊,我就我先把它输出一下,再把他的再把再把它的这个啊。这先求他的认识,应该是几个。你看几一嘛,刚才不有一个吗?接着我把这一个给他什么取出来,打印输出一下,看一下零是不是能看到吧,在我从打印输出看呗,虽然说页面上看不见,打印输出是可以看的呀说。可不可以?是不是一个。是这个吧,是很对啊,一点问题都没有。
17:05
好,来,继续往下。啊,下面啊,我们来看一下这一个选择。什么呢?首先得说选择是ii,把这个事情搞定,要求。有抬头属性,那我们来看一下。有太度属性,这里面有一个什么重号,而区别的不就是属性吗?这是什么意思?是不是有ID的div啊?但ID值是多少?要求吗?没要求那得了。那我写个什么?中画抬头。那有title的ii这个时候应该有几个来看一下,一个两个三个。是三个吧,嗯,行。找你对不啊BBBBDB看一下是不是啊,Bbb这个是隐藏的看不见是吧,没有问题啊,没问题好。
18:17
最后一个了,就剩最后一个了啊来看一下它也是ii,但是呢,他要求什么。他要求title等于多少哈,关键是这个哈,要不要抓双引号的问题。细胞我们可以看一下,看下他呗,这里面除了等于它还有不等于看到了吗。那各种各样的都有啊,我们看简单的啊,看他怎么写的,他有吗有,但实际上可以不加。啊,可以不加啊,什么意思,就这里面直接写个什么哈。啊,我这两种都跟他测试一下,大家明白了,那也就是说现在哈开头hello的有几个。
19:07
是不是两个一个B一个什么D。来看看是不是走你下的吧,好,那我去加双引号。也是可以的。各位可以也可以啊,那这样的话,我们常见的几个啊。过滤选择器就跟他用了一下。好,这个里面啊,还记得这个啊,有一个有一个奇偶数的过滤显示,有时候也会用,能不能懂啊,就看它的下标是奇数还是什么偶数。你说这个难吧,他不难,完全不难,说实话啊,一点都不难。
20:00
就是你不熟练而已,这没关系,多了自然就熟了。好来,我们顺便做一个,做一个小东西。啊,那时间不大了,先不做了吧,等会再说,先休息一会。
我来说两句