尚硅谷前端基础 (31)

啊，刚刚呢，我说的这四个选择器啊，它都属于是一个。简单的选择器，或者说都是单个选择器，你看我用的时候都是一个选择器去用，那其实我们还有很多选择器，它是可以组合使用的，就说这选择器我们可以给它组合起来一起用，举个例子，在这我来新建一个文件零四，我们来说一下叫做复合选择器，诶所谓复合选择器呢，它就是把多个选择器啊给它合到一起去用啊合到一起用，那这里边我们先说第一种，第一种情况什么情况呢？哎这样在这我写一个div，诶div呢，我给他来一个class class我叫做一个这个red啊class叫一个red，然后呢，我这写个字啊，这写一个我是div，然后呢，我在下边呢，我写一个这个P标签，P标签呢，我给他来一个class，这也叫做red，这写一什么呢？这写一个我是P元素啊，我是P元素，写这么两个，然后我们这来运行一下。

那这个时候上边这是div，下边这是P元素，它俩有一个共同的特点，都有一个class叫做叫做red，啊这个red，那现在呢，我想给大家写上，在这我想写一个需求，我要干嘛呢？哎，我要将我们这个class为red的这个。元素啊，设置为红色啊，红色同样也是字体颜色，这个事儿我们现在要做起来就很简单了，直接来一个点red，然后来一个这个color color我们来一个这个red，这是一保存是不是都变成红色了，哎，都变成红色了，这是这么一个效果啊，这是我们传统的用法。那现在我可能就多出一个需求，我要干嘛呢？哎，我要将我这个class为red的div设置，为什么呢？诶字体大小设置为30像素啊30像素，那这里边注意了，实际上现在我再写点right行不行了，就不行了，为什么呢？因为在这里边我们实际上是多了一个限定条件，什么限定条件，你不仅仅是class为red，还得是什么，还得是div，是不是等于让你的这个元素得同时满足两个条件呀，那这要怎么写？哎就是说你既得是div，我们说了你既得是div，还得是什么，还得class为red，也就是说我们是不是你要选中的那个元素得同时符合这两个选择器啊，那这要怎么写啊，这要怎么写？哎，那天形一时很简单，那就是直接来一个。

div.right啊div.right那这个时候我写这个，我是不是等于写了两个选择器，一个是元素选择器，一个是类选择器，我写完了这就等于什么呢？哎，让你选中那个元素，必须同时满足我这两个条件，既得是div class，还得是red，所以这里我就直接来个大框，我们直接看着found size，我们直接来一个30像素，我们来看第一个是不是就变成。

30像素了，这个为什么没变，因为它是一个P元素啊，它是P元素，P元素就没有变，因为我这是两个线性条件，同时是div class，还得为red才会被选中，只要有一个不满足，是不是都不选中啊，都不选中，所以这种选择器我们称为什么呢？我们叫做一个交集选择器啊，交集选择器什么叫交集选择器选中啊，我们来说一下它的作用，作用就是什么呢？就是选中哎，同时符合多个条件的元素，语法也很简单，就是选择器一，然后直接复制，然后选择器二，然后选择器三，然后选择器N，也就说你要把一堆选择器连着写就行了，你写四个选择器，那就要求你这个元素必须得同时满足这四个选择器才会被选。

入啊，这叫做一个交集选问器，什么叫交集啊，哎，我们都学过数组对吧，比如数组，数组可能这边一个圈里边一堆数，这边一个圈里边一堆数，那什么叫交集，哎，也就是说它们俩之间是不是相交有一个部分啊，诶，这叫交集，你既得满足第一个条件，又得满足第二个条件，这个时候才会被选中，这叫做一个。交集选择器，所以像我们这个div跟red.red它们的关系是什么呢？是一个。并且的关系啊，既得是div，又得有这个RA，有一个不满足也不行，所以在这儿我如果写个div ctrl c ctrl v，这我来一个RA2，这是我是DIV2，因为发现这div有没有变大，哎，没有变大，为什么？因为它虽然是div满足第一个条件，但是它是不是并不满足red的这个条件，它叫RED2对吧，它并不一样，所以并没有选中啊，所以这个就跟你叫交集选择器，什么时候用它，你希望我们这个元素满足多个条件的时候，你就可以用它，但是这里边注意，哎，如果啊，就是我们这个交集选择器，注意点注意注意点，哎，我们这个什么呢？哎，交集选择器中如果有元素选择器啊，必须什么呢？必须使用我们这个元素选择器开头，元素选择器开头，哎，所以这个时候你看我这个必须得是div。

点right，我不能点red div必须得使用元素选择器开头还有一点其实就是什么呢？哎，我还可以怎么写呢，是不是只有。

两个不同类型的卷择器能这么写不是啊，我还该怎么写，我还可以写一个点一个诶点一个A，点一个B，点一个C，然后我来一什么呢？哎，我来一个这个color color，比如说我来一个blue，那这是什么意思？诶这表示说我一个元素既是A类又是B类又是C类才选中，当然现在这里边是不是都没有了，哎，我还整一个呗，我给这div我加一个A加个B加个C，这一保存，你看是不是它就变成蓝色了，哎，因为只有它同时满足，就说这就要求我一个元素要同时具有三个类啊，当然这种写法不是特别多啊，这么写的情况不是特别多，但是你要知道它是什么意思啊，什么意思，好，这个是我们说的一个交集选问器啊，但是交际选择器有时候用的时候你要注意，像这种写法，我要写一个div井号，一个BOXS1，这种写法我相信你能看懂，语法上一点问题都没有，那这表示什么意思？表示选中这个div，同时这个。

Div的ID是BOX1，懂这意思吧，但是这种写法一般情况下我们不推荐你使用，为什么呢？因为这么写有点麻烦，因为BOX1基本上已经可以确定这个元素的唯一性了，通过BOX1就可以找到唯一对应那个元素，你这再加了一个这个div，是不是就等于多此一举啊，哎，所以一般不太建议你去这么写啊，不太建议这么写，但是语法上是没有问题的啊，没有问题的，这叫做一个交集选择器啊交际选择器，好，接下来我们再来看啊，再来看，呃，我这换一个套路，我这写一个什么呢？我写一个H1，诶，这是一个这个标题标题，然后呢，我再写一个SPA啊SPASPA我写一个这个，哈哈哈哎哈哈哎，现在我有两个，一个是H1，一个SPA，那现在我想干嘛呢？哎，我想让H1和。

它们的颜色变成一个绿色怎么办？哎，怎么办？那其实我如果想让H1变的话，我直接来一个H1，然后color我们来一个R，那H1就变了，如果我想要死SPA变的话，那我就直接来一个SPA，然后来一个。Color来一个blue，那green啊，那就变了，你看。是不是两个都变了，哎就都实现了，但是这么写明显会有一个问题，你看这两个样式是不是重复了，哎重复了就稍微的有点麻烦，所以这个时候我希望能把它简化一点，样式我只写一个，但是效果是一样的，那这可以怎么改呢？诶我可以直接改成H1。H1逗号败啊，H1逗号SPA，所以这么写的效果就是同时选中了H1和SPA，哎，你是H1或者是SPA都会被我选中，然后把它们颜色设置成了绿色，所以这个叫什么呢？这个东西我们叫做一个选择器分组选择器分组或者你也可以叫它是并集选择器啊，并选择器，这个它什么作用，它的作用是选择什么呢？哎，选中我们这个多个选择器，哎，这么写吧，哎，同时选择多个选择器对应的元素。

对应的元素，哎语法呢，跟我们这个焦焦集啊差不多，只不过不同点，我们焦集你是直接连着写，而这个并集是什么呢？是每一个选择器之间写一个什么呢？写一个逗号，那这样的效果是什么呢？诶既选中了H1，又选中了子SPA，哎，那我这里个这个语法上例子就是选择选择器一符合的元素，同时选择符合选择器二的元素，同时选择符合选择器三的元素，同时选择符合选择器N的元素，这些元素都会被选中，那为什么叫并集呢？还是两个集合啊，两个集合什么叫并集？两个圈里在哪个圈里的是不是都算并集啊？哎，两个圈里的所有加一块儿就叫做一个并集，所以这个时候这种选择器它既会选中H1，也会选中SPA啊，也会选中SPA，所以呢，这逗号啊。

在这的意思大概其实相当于是一个什么呢？相当于是一个逗号啊，相当于是一个逗号，就是说相当于相相当于是一个货啊，相当于是一个货，什么货呢？诶选中H1或者选中此外，你是H1或者是此外都行，只要满足一个就行，而我们这种交集的特点就是你得同时满足它是与的关系，而这个是一个货的关系啊，还有一点需要注意，像我的这个交集选择器啊，这种这种这种。

并机选择器啊，并机选择器它不是只能用元素，我这写个ID也行，比如说我举个例子啊，我写个什么呢？我写个井号B1，然后逗号我再点一个这个P1，然后逗号我们再来一个这个H1，再来一个逗号，我们来一个SPA，这么写也没问题，这就表示什么呢？哎，表示选中ID的同时选中哎，Class为PE的同时选中H1，同时选中SPA，比说我要选四种元素啊，选四种元素甚至还可以怎么写呢？我还可以再写逗号，我们来一个div.red再选中什么呢？再选中那个class值是red的div，懂这意思吧，它可以连着写，就说这个东西可以无限的去组合啊，我们可以把多个选择器给它组合到一起使用啊好，这个是我们说的两组两种啊，一个叫焦集选择器，一个叫并机选择器，或者这个也可以叫做选择器的一个分组，好，我们先说这么多，停一下子。