00:00
好,我们再给大家讲解一下,我们类选择器有一种特殊的用法,而且比较常用的,我们称之为多类名,所谓的多类名呢,就是它有多个名字,那比如说小沈阳,小沈阳的中文名字叫小沈阳,英文名字叫小沈阳,哎,都是一样的,它有两个名字都可以找到小沈阳,好的,那我们同样的道理呢,也可以给标签指定多个类名,从而达到更多的选择目的。动类名的主要目的干什么呀?就是为了达到更多的选择目的,那你比如说刚才咱们做的这个谷歌案例,那你会发现这个谷案,谷歌案例呢,有一点问题是在于,你看我每一个类名的里面都有一句相同的话,比如说叫front size,一把像素,你看1234,它里面这四句话是不是重复使用了四次啊,那我感觉它就有点浪费。哎,那此时呢,我可以给你做一个升华,可以这么来写,是不是每一个类是不是都需要调用一个字号是100的呢?啊,那我干脆我就在上面写了一个类名点FRONT100,大家看字面意思就知道啊,Front是字体的意思字啊,然后写成100啊,就是字号是100像素的意思,然后呢,在这里面写上一个方刚size多大呢?100PX,好,同学们能不能看明白,那我这个已经有这个类名之后呢,其他的这每个类里面就不需要再有这句话了,走你。
01:29
走你走你好了,那同学们跟我来看一下,那也就是说,那么我把每个里面呢,只有一个什么呀?哎,颜色每个类名里面只有颜色,那我这么改完之后,我在浏览器中打开,同学们跟我来看一看啊,一走你会发现,诶颜色是有了,但是大小数并没有变化呀,但是呢,我问问同学们,下面这每一个盒子要不要给它们重新给它定义一个大小呢?要也就是说他们每一个盒子既需要大小又需要颜色,那我就可以采取这么一种思路了。
02:03
好了啊,它既需要一个补录的一个类名,还需要一个放100的一个类名。你看方100是不是也是一个类呀?哎,那我们应该怎么写呢?记住千万不能再这么写了啊,老师那太爷调用克拉斯再走一个方100吧,不能这么写,哎,一定要注意的啊,这么写我们刷新一遍哦,是不不管用的,因为很简单,在一个标签内部只能有一个class。能不能记住,哎,在一个标签内部我给你记下来啊,OK,是这么写的啊,一个标签内部只能有一个class哦,那咱们说的也就说它只能有这么一个好了,那写完B之后呢,你这么写是错误的,所以它多类名呢,不是这么写,是这么写的,仔细看也就是说它呢,既需要一个blue的类,还需要一个在后面敲一个空格,FRONT100就行了。好,同志们能不能看明白,先需要一个颜色,再需要一个叫FRONT100的一个类名,他们都是class,所以干脆你为什么不一起写呢?但是中间是务必要加上一个空格隔开,表示是什么呀?两个类名这个呢讲小沈阳,这个叫小沈阳是不是一样的道理呀,OK啊,所以说呢,这叫做多类名,是不是有两个类的名字了?好,CTRL加次保存一下之后我们看看效果啊,好走你会发现,诶,是不是大小已经有了,颜色也有了,同样道理,后面这个是不是也需要呀,那你就可以把这个FRONT100像素red也要,Orange也要,Blue还要,Green还要,Red还要,那这么写完毕,好这么小问啊,老师这么写不复杂了吗?其实并不复杂,因为你上面的CSS少的,最起码这句话要比着你这句话是不是要省了很多啊,好,你这么写完毕之后呢,我们刷新看效果走是结果跟刚才是一样的效果呀,但是呢,你用这种做法反而会。
03:57
更友好一些,为什么呢?因为我们可能比如说哎,老板说了,这个100像素有点大了,你想改成80像素,如果你按照我们刚才那种写法,你只你就需要到每一个类里面把100改成八十一百改80是不是要修改四次啊,很费劲,而我用我这个多类名的话,你只需要在这里面轻轻的轻描淡写的把100改成80 CTRL加S1保存,然后呢,我们刷新一遍,走一个是不是同意统一的全部都改成了80像素。
04:29
那这样你怎么你这样来修改起来是不是更好的来方便来控制了。这就是多类名的优点,那也就说是它是不是可以达到更多的选择的目的呀,让我们这个选择会更多一些,好,这个呢,是我们讲到多类名选择器,那需要我们注意,简单给大家总结一下啊,多类名选择器,也就是说是我们呢可以再写一个类名,那么这个标签呢,可能需要什么呢?可能需要不同的类,那你就在这里面去直接写就行了,在一个class里面,因为一个标签内部呢只能一个class,所以在class里面写上两个类名,但是呢,务必要把每一个类名的中间用空格隔开,老师我还要一个类名怎么办呢?哎,再敲一个空格,比如说你再给他加一个,比如说宽度,那就是W什么的了,你再写一个类名就行了,哎,如果有的话继续去写啊,好了,那类名选择器在我们实际工作场景中用的多不多呢?会特别多,比如说我给你打开小米,你看一看啊,小米官网中,你看看人家写的这个能,你看这class等于XM怎么怎么着的一个类名空格,第二个是不是又写了一个呀?啊,虽然很长,但是你看。
05:35
用连字符连起来的啊,那是两个类名,好,还有海能呢,你看到下面的地方,那看看这个啊,这个第位class等于哇塞几个呀,1234有四个类名一块来使用的。怎么样,是不是多了一名选择器,在我们实际场景里面还是用的比较多的,目的是为了更多的选择目的,那再说一遍,就是这个SPA呢,可能需要这个类名,还需要另外一个类名,这样呢?哎,让我们选择更加自由一些,这就是我们讲的多类名。
我来说两句