00:00
好,那我们继续来上课,那么这节课呢,我们再来看一下我们的这个CSS的选择器啊。那么选择器这里面呢,我给大家也做了个分类,有基本选择器,成绩选择器,属性还有状态为例选择器,以及这个来介绍一下我们选择器的优先级啊,这是我们在第一个阶段需要去掌握的这些内容啊,那么咱咱们再通过上节课学习啊,我们知道这个CSS基本语法是由什么,由选择器对吧,然后属性及属性取值来组成,所以呢,我们第一部分先来去学什么呢?学选择器,那么对于选择器而言,其实我们会一种选择器,那么也一样可以布局什么布局我们页面对不对,但是呢,选择器肯定会的越多,我们在布局页面的时候会更方便啊。那好了,那我们来看第一个,我们基本选择器里面的第一个叫什么呢?叫做类选择器啊,也是class选择器啊,那么类选择器顾名思义就可以干嘛,可以选,可以有多个名称,因为它是属于一类,对不对,那在这里边咱们来看,我在这里面新建一个零二。叫做选择器。
01:00
嗯,就基本上去吧。好。然后呢,我们在这里边,比如说我给他两个P标签啊,P标签。叫做容值教育,然后再来一个P标签。叫在工作中学习,在学习中工作好了,然后再来一个。叫做学习园地。好,再来一个P,叫做成就自己的只需一套精品,好了,咱们来看啊,我这里边给了很多的皮飘箱,对吧,那我们在学习阶段呢,我就把样式都写成内部样式了,这样呢,方便我们来查看啊。那好,那么接下来比如说我想找到这个P标签,给他设置样式,我能直接这么写P吗?不行,对吧,我要这么去写P标签,它叫什么?它叫标签选择器对不对?也就是说会把我页面中所有是P标签都选择上,咱们来看是不是这样的啊,比如说在这里边我们给他一个背景颜色ground杠。
02:04
这玩color啊,我们拿这些属性先做测试啊,白壳上color了,红色也是背景颜色变成红色,那现在我们再来刷新,你看所有的皮标全都变红色对不对?然而我只需要让融资教育一个变成红色,没错吧,那所以这里边我把它注释掉啊,那咱们来看怎么办呢?我在这里边可以通过class属性给它定义一个名称啊,比如说定义一个万好了,那么当我定义一个万以后,在CSS里边我怎么样能锁定到这个万呢?通过点后面跟什么跟它的名字点万啊,那么这个时候代表什么?就是找这个class啊,找到这个类叫one的,那么找到这个万以后干嘛呢?我让它的背景颜色C。背景颜色变成什么,变成粉色,那现在我们再来看啊,走你。诶。嗯。好了,你看是不是只有这第一个变成粉色对不对,那一样,比如说我想要学习原地也变成粉色了,那是不是。
03:03
我可以直接给他一个class对吧,起名也叫万嘛,哎,因为我们说了它是什么内选择器,内选择器是不是可以有多个对不对,那这个时候我们来刷新,你看它是不是也叫吧,没错吧,哎,那OK,这就是咱们的类选择器啊。那么也就是说在CS,在这个码里面,只要我定义一个class属性,后面自定义一个名称,对吧?然后在CS里面通过点这个名称就可以去选择这个内容,对吧?那么它叫类选择器,类选择器那是可以有多个,没错吧?诶,那现在咱们再来看,它有一个类选择器,还有一个什么呢?还有一个唯一选择器叫什么呢?叫做ID选择器啊,也叫做唯一选择器,那么唯一选择器啊,也就是证明它是唯一的对不对?那么在C中使用什么使用井号来查找,你看类选择器呢,是C使用什么使用点来查找,没错吧?那现在我们再来看。比如说我要给这个设置一下对吧,那我来给ID,比如说ID等于万注意啊,这是什么,这是我们的类选择器的对不对啊,不是这个ID选择器的对吧?跟这个类是不一样的,所以在这里边我要想找到它,我需要怎么办?需要通过井号万,那么这个井号万找到谁,是不是找到这句话,哎,那这个时候我可以干嘛呢?比如说我给他设置个背景颜色杠S。
04:14
O给了一个加绿色。好,那现在咱们来看这一句话的背景,颜色是不是变绿了?嗯。来重新问一下。好了,那你看这句话的背景颜色是变绿了,哎,那也就证明我们选择的是OK的,对吧?那你然说了,那比如说我想让它的背景颜色也变绿,那我还能再给他设置一个ID等于Y吗?来看好了,我又设置了个ID,等于Y,咱们看可不可以在这里边一样,我再刷新行不行,没问题吧,哎,那这样的话就有一个冲突了,对吧,咱们冲突咱们说了I你选择叫什么叫唯一选择器,那么唯一选择器就是它只能有一个名字,但是这里面我起了两个名字。对吧?我写了两个ID都叫ID的,都没问题,都可以选中,对吧?而class选择器呢,咱们说了叫类选择器,而在这个类选择器里边我可以有多个名称就没问题,对不对?哎,包括在这里边,虽然代码下边注意看这这个属性啊,这个属性这里边是不是给我标上一条横线了?哎,虽然他给我标了一个横线,但最终它会影响到我的样式吗?不会没错吧?哎,就算我起了两个名都叫Y,它也一样能识别到啊,但是真正的类选择器跟这个ID选择器它俩真的是这个意思吗?其实不是啊,所谓的类选择器是顾名思义,它可以干嘛呢?有多个名字什么意思?就在我当前class里边可以有多个名字啊,比如说咱们来看我在这里边在空格起个名叫to。
05:44
看好了啊,我给当前融资教育这里边再空格起个名叫to,这个时候刷新,你看我都这个没有任何影响对吧,然后接下来我来设置这个to,那怎么设置呢?点to,我让他的BD啊,不用了,我让他的这个放的杠。Size等于多少,等于30像素,然后字体的颜色,比如等于PP紫色,那现在你再来看啊,刷新。
06:07
是变化了,就只有这一条变化了,对不对,那么同样,那我还比如说我还需要,比如说要谁要要这个去阅历也变化,那是不是通过空格to就可以实现。对不对?哎,那这才叫做类显示器,也就说在当前的class里边,我们可以通过空格来分割起多个名字,那ID可以吗?咱们来看,比如在ID这里边,我也一样空格来个to,那么这个时候我们来刷新,注意你看这个的背景颜色已经没有了,看到了吗?哎,也就是说我们所说的唯一选择题,它只能什么?只能有一个名字,并不是说在这个当前页面中的标签里面,我们定义ID只能起一个。名对吧,而且这个名是不同名的,不是这个意思,只是说什么意思,在当前的这个IP属性里边,我们不能再通过空格分割起去起多个名字了啊,就是这个意思啊,这个意思,所以这里面大家要要了解一下啊,来我再刷新回来。
07:01
嗯。好来来空格删掉啊,这里面的空格他也给你记住选择器,你看如果我要给了空格啊,如果我给了空格,现在你看是不是不好使的对不对,那我要想着要样式好使怎么办?我这里也得加一个空格,你看可以吗?来刷新。是不是也不行对吧,它识别不到了啊,你这么加空格它就识别不到了,除非怎么样呢,我说我这样呢,我空格图它会把整个这个当成显示器了,知道吧,所以这里边我要找的话,那就是空格图。两个都不好使对吧?哎,所以ID选择七,它就不能通过空格去干嘛去起多个名字啊,那如果我要起像这种连贯的词,我可以怎么办?我可以这么去写,看到吧,One two对不对,但是一样,那最终找的时候找的什么,应该是井号one two,那你看这个时候是不是才能识别到。看到了吧,哎,所以大家记住啊,我们所说的这个唯一选择器,我给它还原了啊。哎,好。这个也回来了啊。
08:01
还迎回来啊,那回到笔记我们所说的这个唯一选择器对吧?它只是在当前的这个ID属性里边只能有一个名字,而我们说的这个class类选择器呢,类选可以有多个什么属性值对吧?那么使用空格来分割就可以了啊,这就是指的它的这个类选择器啊,然后唯一选择器呢,是不允许的,对不对?哎,好了,那再往下还有什么呢?还有通配符,通配符标有标志,表示匹配所有的标签,匹配所有的标签啊,那在这里边咱们来看我在这里边啊,给他一个星对吧?我让所有的标签的背景颜色都变成红色对吧?那现在你看我整个页面所有东西都是红色。我的网络怎么了?再来刷新。关掉,不要。这个不要。这个也不要了。重开一下来。来在这里边。
09:05
好,然后我们再来访问。好了,你看是不是所有的这背景都变红色,至于这几个为什么没变呢?因为我这几个是不是设置了背景颜色了,对不对,哎,你比如说在这块我再来一个,我再来一个其他标签啊,比如再来一个div标签,对吧,然后呢,我写我是。It。对吧,我是div好了,那现在我们再来看,你看div的背景源,注意div标签我们又没有设置样子对吧?那没有设置样子,你看它的背景是不是也是红色的对不对,只是什么,我们整个包的都是红色,所以我们可能看不出来对不对,哎,所以大家这里面记住啊,我们只要给了这个星涂美图显示器,那就代表什么?匹配了所有的标签啊,匹配了所有的标签好了,那我们把它。注释掉。输掉啊,OK,然后我们再刷新回来啊,这就是什么,这就是咱们的这个通配符旋转器啊。呃。
10:03
可能下来是吧,不下来的话我们有点看不出来是吧?哎,这是它的通配符啊好了,那再往下来,那么知道通配符选择器还有什么呢?还有这个他编name叫什么标签选择器,这标签选择器咱就不用多说了,对吧?就是根据HTL标签名来去选择对应的标签,那么此时在页面中出现的所有的该标签都会被什么被选中对不对?那比如说在这里边我们找到P标签对吧,我给他设置一个什么,设置一个这个WDTH宽度啊,给它设置一个宽度属性为100,然后再来一个高度属性也为100,那这个时候你看我的这个宽高啊,是不是都会为100。那你看所有的我总共四个P标签对吧,四个P标签的宽高是不是都是一百一百的了,对不对,哎,也就证明什么,我选择了页面中所有的P标签对吧?当然比如在div的下边,我再来一个P对吧,然后我是div后面。The。然后那这个时候你再来看我刷新后面的P是不是也依然是选中的,对吧?只是怎么样,我们这个后面的P没有给它背景颜色了,对不对,那一呀,我在这里边,比如说给它来个class class,那等于y class等于one是设置了它的颜色,那这个时候我来刷新,你看背景颜色是不是有了,哎,有了以后你看它是不是也一样100乘100的,哎,这就是咱们的标签选择器,也就会,也就是说会把页面中所有这个标签都选择了啊好,这就是咱们基本选择器里的内容啊,那么基本选择器里边我们最常用的是什么呀?就是我们的类选择器跟ID选择器啊,所以大家在使用的时候一定要清楚,那么类选择器顾名思义是在当前的class里边,可以通过空格起多个名字,而ID选择器只能有一个名字。
11:42
哦,是这个意思啊,好了,那这节课我们先到这里。
我来说两句