尚硅谷前端基础 (32)

好，刚刚我们说的这一组叫做复合选择器啊，主要说的两个，一个是我们这个分组选择器，选择器分组，还有一个叫交集选择器啊，或者这个选择器分组也可以叫并级选择器啊，总之这个选择器你在用的时候，它可能会有很多名字啊，你自己注意给它去区分一下啊，很可能我们这个呃，相同的选择器那名字不一样啊，那接下来我们来再来说一组选择器。我们来新建一个文件也是非常简单的啊，我们叫一个零五，哎，这是我们这个什么呢？是我们这个父子。哎，父子兄弟。呃，兄弟，选择器哎，点一个这个密码或者这样吧，你简单写一下，我就要一个关系选择器，因为你无论是什么父子也好啊，祖先也好啊，还是什么后代也好，他们都是一种关系，对吧，我们叫一个关系的系，那在这里边我们来写东西，先写个东西啊，那我们简单一点，我在这里边写一个div div呢，这写一个啊，我是一个div，然后呢，在下边啊，我们再写一个div里边我们写一个这个P元素啊，P元素这是什么呢？我是div中的P元素，然后在下边我们再写一个SPA啊SPA这写一个，我是哎，Div中的SPA元素啊，SPA元素。

SP元素，然后呢，这个我们来写一个，在P标签里，我还是再写一个SPA，这个叫我是哎P元素中的这个子弹，那大概就是这么一个结构，结构上看来呢，也并不难啊，我们来给它运行一下。

哎，大概这么一个效果啊，当然现在你看这块可能很乱，不管它，我们我们就看这个结构，首先呢，我这有一个div对吧，Div是我们最外边的元素啊，然后div里边我们来看div和这个P是什么关系，哎，那这里边很明显P是在div的里边，所以我们说了P元素是div的子元素，Div是P元素的负元素，同理我这个div是不是也是SPA的子元素，负元素，死SPA是不是也是div的一个子元素，因为死SPA是不是也是在div里啊？诶，但是这个死SPA呢，它还是不是这个div的子元素，诶注意这个死SPA就不是了，因为它没有直接包含在div的里面，它是包含到了P元素的里面，所以这个时候这个死SPA我们称它是什么，称它是这个div的。后代元素啊，所以这里边我们就要说一下我们这个，哎。

HTML中或者说一下我们这个网页中，我们这个不同元素之间的关系，它们有几种啊，有几种，首先第一个我们叫做父子，提到父子呢，我们就有父元素，还有子元素，第二一个我们叫祖先，还有后代，那我们就有祖先元素，哎，还有我们这个后代元素，对吧？父子祖先，然后后代，还有一个叫做一个兄弟元素，哎，兄弟元素一共这么几种对吧？一共这么几种，那我们先说第一个什么叫做负元素，诶其实概念非常简单，直接包含子元素的元素叫做负元素啊，直接包含子元素的元素叫做负元素，我们说了，老师你写的是写的是废话是吧？写的是废话，那直接包含子元素当然是负元素了，哎，那没办法，因为父子元素我们说的是一个关系，那既然是个关系，就必须得有一个参照物，没有参照物就没有办法说。所以。

在这里边我们来看这个div直接包含了P，还有这个SPA，所以这个div就是P和SPA的负元素，同样这个P元素直包含了这个死SPA，那么这个P元素就是这个死SPA的祖先元素，但是反过来说，这个div有没有接包含P里边那个死SPA呀，没有，它们两个之之间隔了一层P元素，所以这个时候我的这个div就不是我们P元素里边这个div的负元素啊，所以这里边叫做直接包含子元素元素叫做负元素，那什么叫子元素呢？啊，子元素其实一样，直接被负元素包含的元素是负，诶，是子元素，哎，就说你这个元素是直接在负元素的里边，那么OK，你就是子元素，所以P也是div的子元素，子SPA也是div的子元素，这个SPA是P的子元素，它不是div的啊，这叫子元素啊，还有负元素，然后。

大边一个是我们的祖先元素，什么叫祖先元素啊，像div就是这个死SPA的祖先元素，对吧？Div就是这个死SPA的祖先元素，因为这死SPA没有直接在div里面，它是在它的这个间接包含的，对吧？间接包含的，那我们这里边也说了，这个P元素，它算不算是div的后代，或者说div算不算是P元素的祖先，哎，实际上这个东西就好像什么呢？我们现实生活中，我们能不能说，诶我们的父母也是我们的祖先呢？哎，其实这么说是没问题的，其实只要是你的长辈，你都可以认为是你的祖先，只不过有的祖先离我们比较近，有的祖先离我们比较远，所以长一辈是祖先，长两辈长三倍，那也是祖先。所以什么叫祖先元素，直接或间接包含后代元素的。哎，元素叫做什么呢？叫做祖先元素啊，直接或间接包含后代的元素叫做祖先元素，所以你现在看我div就是它的祖先，Div也是P的祖先，Div也是SPA的祖先，所以这个时候我们就直接说一句，叫什么呢？哎，副元素，哎，一个元素的副元素也是什么呢？也是它的祖先元素，也就是说它这块是同时成立的，也就是说你是副元素，那么OK，你也一定属于是祖先元素，只不过不同的是我一个元素它只会有一个副元素，但是祖先元素是不是可能会有很多个呀？比如说我的这个外P是它的祖先，这个div也是它的祖先，Body是不是也是他祖先啊，还有谁啊，HTML是不是也属于他的祖先？哎，所以祖先元素有可能会有很多啊，很多好，接着来说后代元素，后。

不带元素，我们叫做直接或间接被祖先元素包含的元素，哎叫做什么呢？哎叫做。

后代元素跟那个对比是一样的啊，所以子元素也是什么呢？也是后代元素，所以这里边你就要注意了，实际上祖先元素后代，祖先后代的范围比这个父子要要大，父子就得直接包含啊，或者直接被包含叫父子，而我们这个祖先你直接也行，间接也行，所以他们的范围会更大一些啊，他们的范围更大些，然后兄弟元素，那这里边像这个P元素和这个死SPA，他就属于兄弟元素，什么叫兄弟元素？什么叫兄弟元素？哎，他俩他俩的父亲是一个人，那他俩就是兄弟，所以兄弟元素就是拥有相同，哎负元素的元素是兄弟元素啊，是兄弟元素，也就是说你这两个元素的负元素是一个，那么OK，你们两个就是兄弟，你们两个的关系就叫做兄弟元素，好把这几个关系给理清楚了，那接下来。

那我们就可以往下讲了啊，往下讲了，那其实也非常简单，我们就是根据这几个关系来选中我们这个元素。这叫做一个t style标签，在这里边我们先说第一个问题，现在我想干嘛呢？我想给div的子元素啊，Div的子元素SPA设置一个字体，颜色是红色。哎，为我们这个div div的这个子元素。那失败。哎，设置一个这个字体颜色是一个红色，那其实就是什么意思，就是为在我们这个什么呢？为我们这个div。直接包含的SPA设置一个什么呀？哎，字体颜色，哎字体颜色你说直接包含，你说我这有两个死SPA，一个是这个死SPA，还有一个是这个死SPA，那哪个属于div直接包含的，那是不是就是这个呀？那所谓div直接包含的，那实际上是不是就是div的子元素啊，哎，Div的子元素，所以这两句话是一个意思，所以无非我就要选中这个东西，那我们要怎么选中一个元素的子元素呢？那这里边我们说的就是一个子元素选择题，选择器它有什么作用，它的作用就是什么呢？哎，就是选中我们这个指定负元素的指定子元素啊，指定子元素也就是说它是选谁的，它是选子元素的啊，它是选子元素的，然后这里边我们直接说语法，语法也非常简单，就是复。

元素，然后大于号叫做一个子元素啊，负元素大于号，我们叫做一个子元素，所以现在我要选的是谁？选的是SPA奶的奶里面的SPA是div里的SPA，所以这个时候我就直接可以写一什么呢？写一个这个div div，然后大于号，大于号我来一个什么呢？来一个死SPA，那这表示什么意思？这就表示选择div的子元素死SPA，那只有谁只有它一个，这东西会不会算带上，哎，它带不上啊，它带不上，所以这个时候我直接来一个color，我们来一个orange啊orange这时候你发现什么效果呢？发现只有个死SPA变颜色了，而这个死SPA变，变没有变，为什么没有变，因为它是。

后代元素它不是子元素啊，它不是子元素，这1.1定要注意啊，包括我在div外边，我再写一个SPA啊，我再写一个SPA，我写一个啊，我是DIY的span啊，DIY的SPA你看这个玩意儿会不会变，哎，不会变，因为我们找的是div内部的SPA，这个不会变，但是如果我在这个SPA外边，我再套一个div，这个时候它就干嘛了。

哎，它就该就该变了，为什么？因为他也是div里的败，有人说老师你不是选择第一个div吗？哎，我确实想选div一个div，但是我写的这句话有没有体现出是第一个div，没有，只要你是div，只要你这个SSPA在div里边，你说是div子元素，他管不管你是哪个div的子元素，不管，只要你是div的子元素就OK了，那现在我说我就想选第一个div的资元素，那怎么办呢？诶很简单，你可以给div加一个class，比如说我加1CLASS，我叫做一个box啊，叫一个box，那这个时候可以混合使用，我直接来一个div，点一个box，那这样就变成什么，哎，我要找这个class为box那里边的。

Div的子元素四败，那这个时候下边那个是不是就带不上了啊，所以演示这个目的是什么？是告诉你我们的这个选择器混复合选择器可以混合去使用啊，你可以把多个选择器混合到一起使用啊好，这div选择它去掉啊，给它去掉好，那这里边是我们说的一个叫做哎，叫做一个。子元素选氨器啊，子元素选氨器，那还有一个啊，我们就直接往下说了，我给它注掉啊，给它注掉下边一个叫什么呢？叫后代元素选择器。后代元素选择器，那这里边我们来说一下它的作用什么呢？它的作用就是可以选中选中指定元素内的所有后代，哎指定什么呢？哎，指定这个后代元素来语法，语法那就是祖先空格后代，所以那比如说我现在想让我的这个div里边的所有SPA的字体颜色都变成蓝色，那我就可以怎么办呢？我就可以直接div空格，注意就不用写大号了，直接来一个空格，然后是一个SPA啊，然后是一个SPA在这儿，我直接来一个color，我来一个比如说叫做一个sky blue，那这个时候你看这两个SPA就全都变成了蓝色了啊，全都变成蓝色了，那这个叫什么意思，叫选择。

Div里面的所有后代SPA，那这个是后代，这个是不是也是后代呀，所以这两个全都会被选中，所以我们说了后代元素选择器，它的范围会更大一些啊，它的范围会更大一些，所以这个东西后代我们也比较常用，子元素也比较常用，但是后代可能我们用的场景会更多一些，因为它选的更诶更多一些啊，选择元素会更多一些，但是我们需要根据不同的场景去选择啊，这个叫做子元素大于号叫子元素，然后空格叫做后代啊，空格叫做后代，好，这个一定要记住，同样也都是可以混合使用，但是这里边你注意了，像我们这个子元素啊后代我不是说像这种我只写两个，我可以无限的去写，只要你有可以无限写，比如我可以写什么呢？我可以写一个div，然后大于号，然后来一个P，然后大于号来一个什么呢？来一个败，那这个时候他选的是谁div。

大于号，P大于SPA，那这表示什么意思？那div大于P，我要找div的子元素P，然后再找这个P的子元素SPA，所以这就要求我这个死SPA它要有两个子负元，两个组先元素，一个负元素是P，这个P的负元素还得是div，是不是就等于找的是什么？找的是这个孙子呀？哎，找div的孙子对吧？诶找的div里边的P里边的死SPA，而且还都得是直接包含的这么一个关系，所以这个时候我如果写一个color，你猜猜是谁？诶，那只有我们里边那个div是不是是这个SPA，是不是只有他呀？诶你看下边你就没选中，为什么？因为它不符合这个要求，所以这就是表示什么呢？表示子元素的子元素，同样我如果是空格，那就是后代的后代，也就是说它可是可以连着写啊，可以连着写比较简单，可以自己尝试一下啊，好，这是一个东西，然后我们接着往下说，往。

大家说一个就是我们那个兄弟元素选择器啊，兄弟元素选器我们直接来写吧，这我就不再废话啊，直接写我们叫什么呢？哎，叫选择下一个兄弟，选择下一个兄弟，那我们直接来说这个语法啊，语法就是什么呢？就是前一个哎加上哎不哎加上下一个，哎就说用什么连呢？用这个加号连啊用加号连，所以看着啊，我们来看现在我的这个P跟这个死绊的关系，是一个兄弟对吧，是个兄弟，那现在呢，我直接来一个P加上一个死绊啊，P加上一个SPA，那这就表示什么意思，这就表示选择P后边的那个SPA啊，选择P后边的那个子弹，那这个时候我们直接来一个color，来一个red，你来看什么效果。

一直行，是不是这个死板就变了，为什么他变了，因为他是P后边啊，P后边的，P元素后边的，也就说下一个兄弟元素找我弟弟，找离我最近的那个弟弟找我家，我是老大找我家老二对吧，我是老三找我家老四找的离紧挨着我后边那个啊，所以如果我在这儿我复制几个啊，我复制几个。我复制几个你看啊，他选几个，只选这一个死SPA，因为只有是这个死SPA和它和这个P元素紧挨着，而其他死SPA兽都跟他隔着呢，哎，所以找下一个啊，找下一个兄弟，所以这我如果我随便放一个啊，随便放一个放一个，呃，我放了一个什么呢。

放一个P标签，我放个P标，哎，放P标签也不行，我们这放一个div吧，放个div，这时候你看啊，我放1DIV以后，这个SPA还红不红了，它也不红了，为什么也不红了，哎，很简单，因为他要找的是紧挨着P的那个死SPA，而这个P和这个死败之间是不是隔着一个div啊，所以这个时候它就不是紧挨着了，所以加号你就记住了，就表示找下一个啊，找下一个就只有那个紧挨着的，除了它别的都不要，还有一个我们改一下啊，我们直接改一下。叫做什么呢？叫做一个波浪号啊，叫做一个波浪号，我一写你就看懂了，你看现在这些死板是不是全全都变颜色了，这在外边没得说，但是上边这些是不是全都变了，哎，全都变了，所以这个波浪号呢，也很简单。

波浪号叫什么呢？叫下边所有我直接写上面啊，兄弟元素我们就直接写一块，叫做选择下边所有的兄弟啊，选择下边所有的兄弟。哎，所以它的语法什么呢？语法就是哎兄，然后波浪号来一个这个D啊，选择下边所有的兄弟元素是这么一个东西啊，然后注意，如果我这死SPA在P的上边，你说说它会不会被选中，我写这一个SPA，哎，你看这四外有没易受影响没有，他选的是什么，无论是家也好，还是我们这个波浪号也好，他选的都是后边的兄弟啊，下边的一个，哎，紧挨着这一个，或者下边的所有的兄弟元素都是选的下边的，而我们的这个。

而我们的这个前边的兄弟元素，它是不会被选中的啊，不会被选中的好，一定注意啊，这是我们说的这么几个选择器啊，首先说了一个子元素大于号，哎，后代用的是空格，哎，兄弟，下一个啊，紧挨着那一个用的是加号，后边所有的用的是一个波浪号，这几种方式，当然我们后边实际使用的时候，情况可能还要复杂一些，但是别着急，我们后边遇到的我们再详细去说，现在还是先留有一个印象，相信你现在讲完了你可能懂了，但是真正用起来的时候，你还要去思考一下啊，我们先来评一下。