00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去讲一下子深度选择器。那老师呢,通过脚手架新下载了一个模板。那这个模板呢,就是起始的状态老师呢,没有经过任何的处理。那当然啊,它呢,需要变成咱们所需要的样子。那咱们呢,先看一下子根组件ap.will。那这里呢,是模板自带的,那咱们呢,给它变成咱们自己的模板,对吧。那这里啊,老师呢,写上一句话吧,比如说啊,我是跟组件。对吧,那咱们的保存一下的刷新看一下,这是没问题。对吧。那么以及啊,它默认的components当中啊,有一个子组件叫hello啊,点will,那咱们也先给它删除掉,对于咱们而言目前也是没有意义的。
01:01
那当然咱们的项目当中啊,目前而言只有一个根组件app.v。对吧。那么这个案例咱们要讲什么呢?讲的是深度选择器。但是在讲深度选择期之前,咱们呢,先去说说谁呀,说说cope的作用。就是第一个咱们要了解的是什么,就是codco这样的一个属性的作用。对吧,那其实啊,对于咱们的小伙伴而言啊,应该知道。呃,基础的时候呢,咱们也说过,说scope的作用是啥呀,主要是写在这里面的样式,只是针对当前的啥呀组件。但是这句话呢,只能说是半对,为什么呢,咱们呢去看一下。比如说啊老师呢,来一个app.view这是一个跟组件。那比如说啊,老师在这里呢,我给他来一个H几呢,H3标题。
02:03
对吧,比如说写上一句话说我是。副组件,哎,我是副组件火狐,哎APP对吧。那老师呢,想给他书写点样式,那这个就很简单了,比如说咱来一个谁呀,H3。对不,比如说文字的颜色啊,咱呢给它来一个红色,这是没问题的。对吧,那咱们呢,刷新看一下。那首先说啊,老师呢,在跟组件当中,在结构当中是不是书写了一个H3。以及在底style这里啊,写了一个它的样式。H3文字的颜色为红色。那有的小伙伴可能会问老师,这个scope的作用是啥呢?那咱们呢,可以去审查元素去看一下子,你看啊。老师呢,先把这个cope这儿我先给你去掉,对吧,那当然现在的样式有没有呢?也是有的。
03:06
对吧,那你看老师呢,带着你们呢,去看一下的,他的这个,呃,相关的。哎,相关的这个样式对不,咱找到这个H3你看啊。现在在咱们的结构当中,这就是咱的呃根组件APP根组件当中的H3没问题,以及相应的样式,看这。是不是通过标签选择器匹配上给他加了一个谁,是不是加了一个样式文字为红色。那么如果说我给它加上Co呢?S Co pdco。对不,那么你会发现一件事来刷新看一下呢。那么当前的看这啊,这个是咱们的根组件app.view那么你会发现一件事,什么事。给咱们的APP,也就是说这个根组件,你加上scope之后,它的结构当中都加了一个叫做自定义属性。
04:02
都是以date-V后面加一个哈希值。而且对于这个副组件,它新增的这个自定义属性,它的date杠、V杠后面的哈希值都是一样的。对不,那比如说咱们再来一个。老师呢,再来一个什么也是再来一个H3对不,那你看添加上一个cope添加上。对不那么给组件的标签对吧,哎,新增。新增一个自定义属性,对不?那咱们呢,可以刷新,你再看一下,你看对于当前的根组件的结构当中的这些节点,你会发现都添加上了date杠,V杠,七开头零结尾的这样的一个自定义属性。对不,所以说呢,咱们也去做一下笔记。也就说第一个对于。某一个组件A某一个组件,那么如果style t style,那么添加上s so pd scope的属性。
05:13
那么会发现一件事,什么事给当前给。当前子组件的结构。对吧,哎,结构。周,那么都。添加上一个贝塔杠。V杠啊杠,V杠什么什么这样的一个自定义属性。哎,自定义属性。对不,而且你看啊,这块的自定义属性贝塔杠V杠七开头。零结束,你看他是怎么给它添加样式的。是通过属性选择器匹配相应的节点,是不是添加成样式。这种叫做属性选择器。
06:00
那么你也会发现一件事,什么事,哎,会发现。对吧,那么voe啊,是通过属性选择器,对不给需要。添加的元素添加上什么呀,是不是样式。像这种的语法咱们得注意啊,这叫什么,这叫做属性选择器。咱当年学C3的时候学过。对吧,所以说这件事要注意一下。对吧,而且咱们当年应该知道学基础的时候,咱们说过一句话,什么话,也就是说你加上。Scope的作用之一,作用是是啥?是不是只是对于。当前的组件有用对吧,有用的啥样式。但是呢,要注意这句话呢,只是说完了一半。你看为什么呢,咱试试啊,你看啊。老师的做一件事。
07:01
我给咱们的APP组件啊,就是这个根组件,我再给他新增一个子组件。比如说啊,咱们起个名字叫做child点。对不,那咱们呢,也给他来一个模板VIEW1。对吧,那你看那假如啊,老师在这儿来个div,里面也套一个H3。对吧,你看才写了一句话,说我是子组件。Child。这个没问题吧啊。那么咱们呢,可以回到负组件当中,是不是引入。那咱们呢,Inport。Child。Child child for从咱们的点杠cos下的这个child.view。对,不,Child child。
08:02
当然你只是引入了子组件,你还得注册对吧,哎,Components comts。为child。那也就是说给咱们的根组件啊,老师呢,引入一个子组件没问题,那当然子组件可以使用。那老师啊,在这里呢,给他来一个叫做child child child。你看老师呢,目前而言啊,是给谁啊,是给咱们的父组件,比如APP引入一个子组件。对不,那咱们呢,看一下刷新。还是看这里的结构。那首先说现在的这个是谁啊,是跟组件app.view的结构。那首先说app.view当中的这个根节点div是不是添加上了自定义属性?对不,贝塔杠V杠七开头零结束,以及相应的这个H3H3和div对吧,比如这个的H3以及H3,以及说老师那个div哪来的。
09:10
要注意这个div是谁?这要注意,这个div是child的子组件当中最外层的这个结构。对不?所以说你会发现一件事,什么事。对于咱们这块的结构,其实它是谁,它是子组件child几啊,就是child。对不,而且这块的结构最外层的div是谁?最外层的这个div是咱们的child的子组件的根节点。所以你会发现一件事,什么事对于child的子组件而言。它的最外层的这个根节点也加上了对杠V杠七开头零结束的这样一个自定义属性。而且自身这个子组件也有属于自己的自定义属性。对不,那这个是谁?这个是父亲。
10:01
那这个是谁?这个是属于自己child子组件。对不?其实咱当年说过一句话,什么话说,哎,老师加上了Co这样的一个属性,OK,那么当前书写的样式只是会影响到当前的,呃,当前组件里面的样式。那这块要注意了,你看现在这么看,确实是这么回事。但是你要想明白一件事,什么事你看老师要字母。那如果说对于子组件child,那它只有一个根节点,叫H3,你看会不会影响到。对不刷新看一下。你会发现它是会影响到。对不为什么,你看这儿啊,你看这儿。虽然说右侧这里先看这它是通过H3加上date杠,V杠,七开头零结尾的这样的一个属性选择器匹配到H3。
11:00
对不,文字颜色为红色,盯住这你看。那对于这个是谁,这个是咱们的APP根组件最外层的子节点。对,不就是谁,就是他。对吧,他们是有这个自定义属性的,你看吧,七开头零结尾。那以及这个副组件当中有APP组件当中有三个H3,这三个H3是重合的。APP组件有两个。对不对,那以及child的子组件,现在它只有一个根节点,叫做H3。所以你会发现子节点就是子组件child.view的根节点,它也叫H3,而且它的自定义属性跟他的父亲是一样的。所以说会发现一件事是什么事,钥匙对于子组件也可以。对吧。就是咱们做一下笔记。这块呢有一个注意的事项,比如说如果子组件的跟标签。
12:01
对吧,或者这么写就是子组件的跟标签。对不,那么也会拥有什么,拥有副组件啊当中的什么。自定义属性,而且还是咋的一样。对不,而且这个测试可以把咱当年学的那个SC再添加什么呀。对吧,那也就是说如果根,也就是说如果子组件的根节点。对吧,比如说你看这儿,如果。子组件的根节点和父组件当中的这个所写的选择器。对吧,你写一下,就说如果子组件的根节点和谁和。副组件中。哎,书写的。样式相同,那么也会,怎么呢?也会。添加上。相应的啥呀,样式。
13:02
对不?所以这块呢,一定要注意,那如果老师给他退回来。如果变成什么,变成div里面套H3,那你看这回它为什么匹配不上。对吧,你看啊。咱还是盯住这,你要负组件app.view的自定义属性叫啥?七开头零结尾。对不,那对于咱们的差点will。这个子组件它最外层的根节点适合是拥有附近相同的自定义属性,这是没问题的。但是对于子节点内部的结构,除了子组件内部的,就是除了子组件最外层的根节点以外。其余的里面的子件拥有的是不是这个,呃,组件所拥有的自定义属性,所以说是匹配不上。对吧,你看吧。你看这块的选择器啥,H3后面的属性,属性选择器这个属性值是多少?对杠V杠七开头零结尾。
14:05
对不,那你看根本匹配不上。对不,这是二开头八结尾的,这个是属于child.view子子组件自己所拥有的自定义属性。对不,所以说是匹配不上,但是如果没有了div。对不就是假如说没有了div,你看老师给你来个假如没有了div,就只有谁H3。那H3是作为整个子组件的根节点的,会拥有父亲相应的啥自定义属性相同的。对不,那比如说这个啥child。跟父亲是相同的,那当然通过咱们的属性选择器是可以匹配上,因为他是有的。对不对吧,所以说这块要注意一下。对吧。那假如说咱们再做一个测试来,那对于这个子组件啊,它的结构很简单。
15:03
就是它的节点和谁就是它的根节点就只有一个,和父亲当中所书写的这个样式啊,是相同的,因此是不是也能哎,是不是也能添加上相应的样式。对不对,对吧,那你看咱来一个结构稍微复杂一些的,你看啊,老师给你来一个。那咱们再来child child差一点没有。对吧,你要老师这回再来,我给他来个啥。有一。那这回呢,老师外层的要一个div,那咱来啊,老师放个ul里面套力。对,不利来几来三个。对吧,那么那么这里面呢,老师呢,力里面呢,我再来个啥,再来个H3。对吧,这叫啥吃饭。对不,那这个再来,再来个H3,这是睡觉。对不,那这个咱们再来H3。
16:00
再来一个打豆豆。打豆豆。来,那么老师呢,在副组件当中啊,我先把这个child先给你注释掉。对吧,那这块呢,咱们也先不要。来,再来。再回呢,老师呢,要引入谁呢?引入咱们的子组件CHILD1,因为它的结构相对于child而言呢,稍微复杂那么一丢丢。对不?你看咱们测试一下子。老师的引入自间CHILD1IMPORT。Child child child1。From应该是点杠。Complement comps下的对吧,应该是childd child1.0。对吧,那当然咱们这里面呢,也要怎么也要注册一下child几一,那咱们在这呢,也使用一下CHILD1。对吧,来咱们刷新看一下。
17:01
操你。那首先说啊,现在呢,是有一个APP根组件,根组件当中呢,有属于自己的两个H3,以及还有一个子组件,子组件就叫T1,那你看啊。对于子组件的根节点,是不是拥有着跟着父亲相同的自定义属性?对不对,那现在呢,咱们在副组件当中啊,在副组件当中写的这个H3,你要注意它是通过属性选择器,H3加属性选择器,是不是加上相应的自定义属性,是不是匹配到H3加上文字颜色为红色。但是咱们的这个CHILD1子组件,它属于自己的自定义属性是三开头五结尾的,那H3对不?他想H3H3。是不是也是三开头五结尾,所以说是匹配不上。这块要看懂。对吧,那假如说我现在。就是想在父组件当中写的样式能影响到子组件的,呃,这个这个样式那怎么整。
18:06
那怎么整?对不什么意思,就是现在对于谁,对于咱们的副组件写的这个样式。对吧,那负子件当中是不是写了一个H3。对吧,文字颜色为红色,我就影响,就想让它影响到子组件当中的这个这个这个什么呀?呃,这个立下的这个H3能不能影响到。能不能?可以。怎么整,你看第一种选择方案是啥,你看啊,咱们先看,如果我不加SC能不能行,你看一下。可不可以,可以。对不?你看如果不加SC父亲所写的选所写的这个样式啊,所写的这个样式你看啊,它是没有属性选择器的,因为他没有加上自定义属性,看见了吗。对吧,而对于子组件当中的这个H3。哎,也是没加,所以说是不是能匹配上,是不是能加上。但是我就是想加高。
19:03
那如果想加SC你看啊,如果想加SC你是没办法影响到,为什么你看啊,如果你加上了SC,你看父亲的自定义属性是七开头零结尾,OK。七开头零结尾,它是通过这个属性选择器去匹配H3加样式。而你子组件CHILD1当中的这个,你看啊看H3,它是三开头五结尾。他根本匹配不上。但是我就是想在SC当中。带有scope就想影响到啥,影响到子组件当中的这个H3的呃样式,这怎么办。那这块呢,就要利用到什么呢?利用到深度选择器。对不?这块咱们写一下子三。大家注意吧,啊注意。对不,咱们现在这种情况是什么?就是如果副组件。
20:00
副组件的什么,如果副组件的样式。括弧加上了谁?对不,而且。还想啊,还想影响到子组件的啥呀样式。对吧。那像这种情况,像这种情况这种。情况,那么我们可以使用什么?使用深度选择器?对不?那当然咱们探讨的是啥?探讨的是父亲的样式可以影响到子组件的样式,但是这要注意,子组件的结构不是很简单的,因为咱第一个测试的child不就是结构很简单吗?对吧,啊,咱说的不是这种,咱说的是结构相对比较深一些的,我就想影响对不?你看这H3的结构明显比它深。对吧,那就得用到啥深度选择器。那首先说深度选择器可以干什么呢?写下的。
21:02
深度选择器可以实现样式的穿透。对不,而且深度器有几种的,常用的有三种,第一种原生的CSS。原生的CSS经常用的是它三个箭头深度选择器。那以及less样式经常用的是谁?用的是它?对不?而咱们的SARS经常用的是什么冒号冒号。哎,呃,叫V-DEP。介绍教导他。对不,而咱们目前所用的啥,目前所用的是原生的CSS。所以说咱们呢,可以去书写咱们的啥呀,要就是深度选择器。对吧,你看比如说老师给他来一个三个箭头。那咱们先看一下对于子组件的样式可不可以影响到,是可以的。对不对,要明显是不是影响到了。
22:00
对不对。对不,虽然这个自定义属性,你看这种自定义属性,它已经。你看根本就没什么用。对吧,自定义属性哪有在前面写。对吧,所以你看是能不能影响到是可以的。对不,所以说呢,这块呢,要注意一件事,什么事,这种写法叫什么叫深度选择器,可以进行样式的穿透。对不,也就是说你的副组件当中的样式加了SC。但是我想影响到子组件当中的结构的样式,OK,可不可以可以。对吧,我非要加SC,而且还想影响到,OK,那你加什么,加深度选择。对不?那所以说再回到咱们的这个项目当中,回到咱们的这个项目当中。咱们呢,把咱们这个项目呢,给它跑一下子,你看咱其中刚刚所讲的这个轮播图,其实用到就是谁呢?用到了就是这个,呃,这个这个这个深度选择器,你看咱们可以看一下,看一下咱们的这个。
23:02
对不?哎,你看咱们的这个。咱们所遇见的情况其实跟刚刚的差不多,你看咱的这个啊,你看啊,就是咱的这个咱的这个咱的这个这个轮播图这块的这个样式。那咱们呢,去找到咱们相应的啥相应的组件,咱们找一下子就是谁呢,SK这里你看。现在对于我们而言啊。咱们的应该知道,你不加cope可不可以影响到子组键,可以是不是可以变成小球,但是如果老师把它放哪,放到cope当中,你看同样的这个样式,我放到带有SC的style里面,它是不生效。对不,你看它明显不生效了。对不对,对吧,比如说你父组件当中的样式,没办法影响到子组件当中的啥,是不是子组件当中的这个样式。
24:01
对不除非是什么,除非像这个,除非像这个这个这个呃,肉和扣一样,它的子组件的结构非常简单,你是可以影响到。但是为什么说咱们轮波图的这个结构当中的这个button为什么影响不到。因为啥?因为它的结构太复杂了。对不,那所以说像这种情况你就得用到啥,用到深度选择器。比如说副组件的样式,OK,加入了scope。而且我还影响,想影响到谁,想影响到子组件的样式,OK,你要修改它的样式。对不,那没办法,你只能用啥用深度选择器。对不,哎,那你这块就可以用啥深度选择题。啊,你看吧,咱这回再测试一下,你看能不能影响到,是不是就可以。对不,所以说像这种泡沫你得学会,但是一定要注意原生的CSS用什么,用这种箭头,但是一般情况下,咱们说一下子看这啊老师说一下子。
25:03
这个深度选择器一般。用于原生的CSS。而像这种的。深度选择器一般。哎,一般用于less。对不而像这种的深度选择器一般。哎,幼鱼,SARS。OK吧,所以说咱们这里面所写的是什么,所写的是原生的CSS,所以说咱们用它就行了。OK了,这是咱们讲了一下子深度选择器。
我来说两句