00:00
下一个我们要说的叫层次选择器,你首先得知道层次选择器是用来查找什么的。子孙后代和兄弟。啊,再去看他到底怎么样查找子孙后代,到底怎么样找兄弟啊。这个里面也有对吧,其实一共是一共是不是就四个语法,四个语法我们来看一看吧,啊,这里面有一个页面,我们来测试页面。啊,页面呢,也非常简单,没有样式啊,Ul下面有几个ii,最后一个呢,不是ii了,是什么呢?八其中有两个ii的里面呢,有什么有18啊。我们来看一下啊,先别看,不用看这上面的啊,我们就看这个需求就行,把这四个需求把它一做就OK了。好,还是一样,先给大家注释一下啊。
01:07
那我们,那我们就一个一个看呗,先来看第一个,他说什么意思,先把这个写好是吧,你甚至于说你可以还可以把这个都写好。除了红色,还有什么颜色比较现?Yellow yellow也比较显眼,哎,怎么不对,看起来好像不对啊,来写这个理念是吧?他说找什么ul下所有的失败,那他这个所有失败一定是孩子吗?对,那我应该用空格还是应该用大于号空格?啊,空格是不是找后代的,那就空格失败,那应该找到几个失败呢。
02:04
一个两个什么三个能不看到,好,我们来看一下。对不对。没问题吧,没问题,很简单,So easy,好,下面继续往下看,把这个复制一下,把这个注释一下。下面我们看第二个。啊,还是先把这个结构写好来,Ul下面所有的什么子元素,那就用什么大于符号写什么失败,那它有几个子元素失败呢?一个最后一个有的选中有颜色的是不是这个E啊。好,刷一下走你。没问题吧,没问题啊,这个也搞定了。挺简单的,好,下面我们继续往下看。
03:05
嗯,还是一样,先把结构摆好。是吧,说什么选中class为box的下一个ii class为box的下,看一下class为box的下一个什么,下一个ii能不能理解只一个啊,后面紧挨着它那个。OK,这个就用什么呢,加号要匹配所有紧接在。SPA后面那个next元素,也就是说最多匹配几个一个来看一下怎么写。响亮了卡就不点呗,Box怎么办?加号要求必须是什么?Ii有吗?
04:00
有没有?是不是有他是不是他嘛,是不是说白了选中的应该是应该看到选中的有背景,是不是应该是B啊。是不是啊,来我们来看一下看是不是啊说。对的吧,对的。那个石板的宽度是不是就这么宽一点呢?是吧,大家看到那个开始的那个SPA的颜色,是不是就这部位的颜色啊,而如果是ii的话,是不是占整个说白了ii是什么元素,快元素吗?好,没问题吧,就选择一个是吧,下面。下面这一个呢,它是选中的是所有什么兄弟,但都要强调一个啊是什么后面的所有兄弟,这个时候用的是什么呢。波浪线。啊匹配你看这个什么什么意思。
05:03
它其实是一个单词的缩写啊啊I。啊,就是前面的。啊,那它是前面,那后面是不是匹配,最终匹配的不是它,而是这个它后面的某一个元素,某一些元素,应该说对吧,所有S什么意思,兄弟姐妹啊加S嘛。嗯。能懂吧,啊好,那我应该怎么写呢。看一下啊,多少伏括号来先是什么ul下。这不有吗?接着说什么,说若下class为box,那我这个怎么整?有啊,小妹这样这样啊是吗?我是不是要找弱的后代?
06:06
你看嘛,U标签下面class为box的元素吗?是吗?我不应该是找ul下面的它的它的后代元素吗?是这意思吧,也就是说我这个class box是是ul的属性吗?不是,而是它的后代,我应该怎么写空格?空格和大于符号有区别吧,这个代表是我是角入来的什么后代里面找它要求什么点box,那你看ul下面,Ul下面。有点box吗?Ii是不是还有点吗?好像没有了,那我那我这样我能不能加一个。嗯。
07:02
Class,为什么box?可以吧,可以,那也就是说啊,跟这一个匹配,大家看啊,我把这个加上有几个。几个,两个,一个是什么。一个是ii这个这个CC对不对,一个是我的这个SPA。这个失败是吧,DD那应该选中几个有几个颜色。两个,而且有区别,看到了吗?因为上面这个我匹配到的是ii,而这一个匹配到的是什么。看懂吗?看懂好,但不够,我的要求是什么,我是与这个元素后面的所有的什么兄弟元素,那也就是说大家看到这里。啊,大家看这里啊,所有后面兄弟不就找到他们了吗?
08:05
对对,这个博士是不是,那他呢,有吗?没有,他没有兄弟了,看懂吧,好,那我怎么写。看了这个语法是用什么波浪线,但波浪线的后面写什么呢?这个是关键。波浪线啊,波浪线后面有,后面我对标签名对他的兄弟元素有标签的限制么?有没有没有限制,没有限制那就是什么星号,星号其实也可以看成是标签名匹配,只是说我对标签名没有什么没有要求。对不对啊,这个要搞清楚。啊,也就是说你看到这个以后,你要再要能够给它翻译成中文。
09:00
说白了,现在我是不是相当于将将我的中文的描述翻译成这个选择器啊,那反过来你也能做,看到别人的选择器要能翻译成这一个中文的表达。因为只有这样你才能说明你是懂的嘛,你才知道我找的到底是哪个元素。那也就是说,现在应该有哪些是有颜色的?啊,看一下这个吧,那些。那些?这三个。对不对,能理解吧,刚才找到不是这个C吗?是不是要找他和后面所有的兄弟吗?后面所有兄弟可能是ii,也可能是什么是吧。来我们来看一下,看看是不是啊,看看是不是刷一下就知道了,走里是吗是吧。好,OK,没问题,这个也并不难。
10:05
那这样的话呢,我们就把一些啊,这里面四种层次选择器给它测试练习了一下。你们可能就要反问老师,我们去选择去干嘛哟?是吧,我们要想一想,我们学这些东西最终是不是要能够去能够去对我们的页面进行操作呀?那对页面操首先得找到你想要操作的元素吧,所以我们会学各种各样的选择器,目标就先找到元素,下一步我们就会学各种各样的操作。你写的首先得想办法找到元素才能操作,能理解吧,啊要先要理解咱现在做这个事有没有这个必要,他是有的啊。好。
我来说两句