Web前端网页制作初级教程 19.层级选择器 学习猿地原创

好，那我们继续来上课，那么基本选择器看完了，我们再来看我们的层级选择器啊，那么咱们来把它复制一下啊。CTRLC拿到我们的这个里边，我们新建一个文件啊。邮件。新建一个文件，叫做零三层级选择器。然后呢，在这里面我们给他注释一下，就放到A板里边吧。成绩选择器里边的第一个叫做什么？组合选择器，组合选择器什么意思呢？就是可以通过选择器的名字干嘛呀，进行多个选择器来组合啊，就是一起选择选择多个啊，那咱们来看，比如说在这里边我有P标签。对吧，然后呢，我还有这个P标签。呃，算了，叫div吧啊。然后还有什么呢，还有这个。B标签啊。

还有这个SPA标签，好了，我写这么多啊，那P标签里边，比如说我们写点这个内容吧，啊叫什么呢？叫做我们都知道不听老人言的下一句什么叫做吃亏在眼前对不对，但是谁知道上一句是什么？上一句什么叫做俗话说的好嘛。哎，俗话说的好对不对，好了，那再来，比如说在这个B标签里边，我们再写一个就写一个什么呢？呃。叫做你们看，你们看孙建奎长得。像不像？斯琴高娃脸上的。裤子啊，那么耀眼。右眼好了，然后在这个div里边，我们再写一个，要写一个写写一个什么呢，我们再来一个叫做。包青天这辈子都没敢说的一句话啊。

叫什么呢？叫做。一会儿看我脸色行事。好了，那现在咱们看啊，这里边我们有这么多标签对不对，然后咱们说我们要做的是组合选择器，对吧，咱们一样啊，这里边比如说。B标签，我给一个什么？我给了一个class吧class class叫做。万的对吧，然后那个SPA标签呢，我给了一个ID叫做。One的，哎，我给了这么两个对吧，然后呢，咱们来看我在这里边组合怎么组合style标签，我想去选择，选择谁呢，我想选择叫做。P标签，然后呢，逗号再来，还有谁？还有点Y再来，逗号还有谁呢？还有点two，不是没有点two，是井号。Y，对吧？哎，这时候是不是我选择了三个，我都选择谁选择了P，选择了他以及他对吧？是选这三个，只有div我没有选择啊，那选择他们三个以后干嘛呢？我给他们三个呢？BCGRD背景颜色杠Co等于一个红色，那现在你看我是不是只有这三个元素的背景颜色是红色啊来，我们再来访问。

你看他是他是还有他是这个中间这个包形，天这辈子没敢说的话是吗？不是对吧，因为什么在组合选择器中，我是不是没有选择它呀？哎，这是咱们的组合选择器啊，也就是说选择器名，选择器名，然后最后多个选择器之间用什么用逗号来分割对吧？列如这样的一个效果啊，这是咱们的组合选择器，我可以干嘛呢？同时选择多个选择器，然后一同设置什么相同的样式啊好了，那组合选择器了解以后，我们再来看什么呢？再来看包含选择器啊这块呢，我也给大家注释一下啊。叫做组合。选择器啊好，主选择器完之后，我们再来看包含选择器，那包含选择器的话，我在这里面就需要做一个包含了，对吧？比如说包青天这辈子没敢说的话，那包青天是一个重点对不对，那我来一个B标签，再来一个结束的B标签，我给他干嘛呀，做了一个包含对不对，然后再来，比如说再来这里边。Div里面又包含了一个P对吧，然后P里边我们在写一句话叫做我。

说了叫做换一个吧，叫松江。孤岛移夜风。松。将。孤岛。孤岛一叶。好了，那比如说写这么一句啊，然后呢，这里面有点少，再来一句吧，这里面比如我再来一个，再来一个B标签。再来一个结束的。B标签啊，然后这里面再写一个叫。G。之。走。爱成梦好了，咱们来看啊，我这里边写了这么样的一个结构，然后呢，这里边还有它对不对，那现在我们先来看效果啊，来刷新一下，刷新完以后，哎哟，我们把这个组合的这些先注释掉啊，组合的注释掉，来把它注释掉。

因为只要在P标签就会被选择嘛，对不对，好了，现在都注册掉了，注掉以后我们来看在这里边它的结构是什么呀，它的结构是不是div里面包含了一个B对不对。哎，然后它的结构呢。它的结果是什么？是不是D？哎，不对，我应该写到哪呢？应该写到。在这里边吧，就是div里边包含了PP里面包含了B，是不是这样的？哎，那现在我们来看是不是这个结构啊，你看这里边是直接div里面包含了这个B对不对？而这里面呢，是什么呀？是div里包含了P，包含了B，这是不是B标签啊，对不对？哎，现在咱们来看，我们来看什么呢？看这个包含选择性，怎么叫包含呢？也就是说在这里块你看好了，我说div里边的B标签，那给它设置一个什么呢？设置一个color字体颜色啊，Co为PU，那你看你看哪些能变化啊。

刷新，诶看包青天是不是变化了，这一句是不是都变化了，那我们对应的代码，咱们来看一下是不是这样的啊，你看好了，我说的是div空格，注意啊，我给的是div空格B什么意思，也就是说只要这个B在这个div标签中出现，就能被包含，对吧，那你看。我的第一个符合要求吗？不符合，因为什么？因为它的外层没有div，对不对？但是我的DIV2个呢，在div这里边是不是有一个B标签，对吧？这个B标签是不是只包含了包青天三个字，那你看包青天这三个字是不是变成紫色了，对吧？那再往下来，我这里面div标签里面有PP，里边有B，是不是这个B实际上也是属于被div包含的，只是他的层级关系应该什么，应该是这个B属于他的孙子级了，对吧？P是他的儿子，这个B呢是P的儿子，那是不是就div的孙子了，对吧？那是不是也属于在div的范围内，那在范围内你看整个这一句是不是都变成什么，你看div。PB完了，翻茄子爱着梦整个这一句是不是都变成紫色了，看到了吧？哎，这就是什么？这就是咱们包含选择器，也就是说只要是被它包含就可以啊，你看这里边选择器一空格，选择器二表示什么意思呢？表示选择器二被选择器一包含即可。

对吧，列div空格P啊，也就是说只要这个P在div里边就可以了，对不对，哎，这是咱们的包含选择器，那么有了包含选择器，另外还有什么呢？还有这个子代选择器啊，就子选择器，子选择器就是选择器。大于一个选择器啊，它表示什么意思呢？表示这个选择器二是选择器一的子类啊，咱们来看啊，我把它再注释掉，注释掉以后。这个叫做包含选择器，我给大家先记着啊，包含选择器来。看好了，现在回来了，对吧，还原以后我们再来，我们再来看什么呢？看它的子代选择器啊。子的选择器啊，那叫div大于B啊，直接给个div大于B，然后我让它的c r color变成什么呢？也一样，我们给它变成一个蓝色吧，啊变成一个蓝色，然后放到刚size变成30像素要大一些，那你看能被他选中的都有谁。

走，你看是不是只有这一个包青天呢，对不对，哎，因为我这么写啊，子弹选择器也就代表的是这个B标签，只能是div的子类，不能是孙子类，只能是子类不能是孙子类啊，所以在这里边，在代码里边，你看是不是只有这个。B标签符合要求，因为div里面的有个儿子确实是B，对不对？哎，而这个却没有被选中，为什么？因为他div的儿子叫P对不对，而P里边才包含的B，那他们两个是不是什么这个。孙子关系了，对不对，哎。所以只要是我使用这个大于号了，那他只能选择什么父子关系啊，只有父子关系，所以这里边我给大家记得你看。表示选择题一的子元素为什么呀？

为选择C2对吧。只有父子关系才可以啊，所以他们两个是有区别的，所以大家一定要给他记住啊，他们两个是有区别的啊，一个是只要被包含就可以，一个是只能是父子关系才可以啊。好了，那再往下来，那你看好了，相邻选择器啊，相邻选择器跟兄弟选择器它俩也差不多啊，什么叫相邻选择器呢？你看表示紧选择紧接着选择器一之后的选择器二元素什么意思？你看这里面举个例子叫div加P，什么意思呢？表示紧贴在div元素之后的P元素，咱们来看啊，我就用这个例子，我们来去访问一下，看能不能访问到啊，来把它注册掉。核心一下啊，我当前应该有符合要求了，你看div加P啊，也就是什么意思，紧贴在div之后的P元素，我让它的c color变成什么呢？我让他color，我让它的背景颜色啊，让C变成红色，那你看有哪个P标签的背景颜色能变红。呃，一个都没有看到了吧，哎，一个都没有，为什么呢？我们来看一下吧，当前这里边有个div div及挨div之后没有P，所以不好使，对吧，而这个div div是这个P是被它里面包含的，不是紧挨的，所以也不好使，好吧，那在这块我们来一个P。

来个屁对吧？这说我是div兹。后的P元素，那我们来看可不可以啊，这为类酸剂，你看我只要一加上它符合要求的，是不是直接它的背景颜色变红了对不对，那同样我在div之前加的，比如在这里边我再来一个啊，再来一个什么，再来一个P啊，叫做我是div之前。P元素对吧，那现在我们再来刷新行吗？不行对吧，只能是div之后的P元素啊，那包括比如说这块咱们也有div对不对，那在这里边我再来一个P标签对吧，我来一行AAA，你看可不可以。刷新A是不是也行，对不对，因为当前这个A是不是也在div之后啊，对不对，但是呢，如果他们中间一旦间隔一个标签，比如说我给了一个。

超链接对吧，叫做五。是超。链接好了，那这个时候再来看刷新。是不是就不被选中了，对不对，为什么？因为在div之后并不是P，而是一个A标签啊，所以在这里面大家要注意这个加号啊，表示什么呢？表示是在紧挨着某个元素之后的这个元素啊，才能被选中啊好了，这就是咱们的加号，那么另外还有一个什么呢？还有一个兄弟选择器对吧？那这块我也给大家先注释一下啊，这个叫相邻选择器。紧挨在啊div元素之后的P元素对吧，然后我把它注释掉啊，注释掉以后我们再来看什么呢？再来看兄弟选择器啊。

兄弟选择器，兄弟选择器什么样的？Div波浪线P？哎，那我选择它以后，我让它的背景颜色变成什么呢？我们再来换一个，换成呃。这个粉色。杠C，好了，现在我们来看啊，我叫div波浪线P对吗？也就是说只要是这个兄弟它都能被选中是吧？准确说是在div之后的所有的兄弟元素啊，那你看在div之后的所有兄弟元素，我们一样再对照一个啊。Div之后的所有数据元素P第一个是AA没错，对吧，因为在div之后嘛，Div之前呢，是不是俗话说的好，这也没有用，不会被选中，对不对，然后再往下来呢，在这个。P。我是div之前的P元素对不对，是不是也是因为什么，因为它虽然在这个div之前，但它是不是在这个div之后，对不对，所以它依然是符合要求的，那再往后呢，这个P是不是也是符合要求的。对不对，因为它也在div元素之后吧，嗨，这就是咱们的什么咱们的兄弟选择器啊，那回过来我们来看一下啊，兄弟选择器叫什么？选择器一波浪线选择器二表示选择器一后边的所有星律元元素选择器二对吧，波浪div，波浪线P，也就是div之后的所有P元素啊好了，这就是咱们的层级选择器啊，那么层级选择器我们在实际上使用的时候用的也比较多，所以大家下来以后一定要多多练习才可以啊好了，那这节课我们到这里。