00:00
好,我们继续来上课,那么这节课呢,我们再来看一下我们的属性选择器,以及我们的这个状态伪类选择器,好,好了,那我把这两个呢拿过来,CTRLC放到我们的这个代码里边,新建一个文件。叫做零四。属性选择器及。及状态为类选择器啊。然后把它粘过来好了,粘过来以后我们现在先放大我们一个看啊,先看属性选择器,那么属性选择器顾名思义就是根据我们的属性去选择我们的标签啊,那么在第一个阶段属性选择器呢,我们只接受两个啊,当然CSS3中也增加了很多属性选择器啊,那么等到我们的第二阶段,我还会给大家再去讲解这个属性选择器,咱们先来看这个属性详细加数了,就是根据属性名或者属性值来查找某个元素,对吧?那它格式就是标签后面跟它的属性啊,那么这个我用E和ATT来表示,E呢代表的element。
01:02
T元素的意思对吧,ATT呢,就是属性attribute at tribut。Attribute的意思,好了,那咱们来看一下,在这里边我们给它设置一下啊,一般啊我们用这个。呃,属性选其用什么居多呢?一般我们去选input的标签,这设置样式可能会多一些啊,那咱们来看,我就直接在P标签里面写了,比如说this is a test,这是一个测试对吧?然后呢,在这里面我给了一个,比如说给了一个title属性嘛,哎,Titlele叫什么呢?叫做this。对吧,然后呢,在这里面也一样,我再来一个P标签啊,然后呢,这里边我给他写一个我是。一个P。好,然后呢,在这里边我们也给了一个K属性,叫做this is和test,好了,这个值是这样的,对吧?那现在我这里边有两个,那我们先来看一下它默认的效果是不是这样的,哎,好了,那咱们加了推动属性来说了,所有标签都有推动属性,鼠标放上去以后是不是会显示这个值,对吧?这里边鼠标放上是不是也会显示这个值,那咱们来看第一个啊,第一个什么呢?是E中国号at dt什么意思?就是P标签带有推属性的,比如说在这里边我再来一个P标签啊,我写的呢,我没有推属性。
02:14
属性对吧,那么接下来我开始对它进行选择啊,看了我们要怎么选择呢?在这块一样,我们通过style标签,然后我们来写选什么P标签中括号它带有推属性的,那么这个时候我让它的这个背景颜色。变成红色,那我们来看哪个会变啊,来刷新,刷新以后你看第一个和最后一个都变了,因为什么我鼠标放上去这个是不是有推头属性对吧?这个是不是也有推出属性,是不是只有这个中间这个P标下降,我没有推出属性的这个它才没有啊。对不对,哎,那OK,这就是什么,这就是咱们的这个。啊呃,属性选择器啊,那么另外呢,这里边我还可以这样,比如说你看我再来一个,比如再来一个什么,再来一个这个div标签,Div标签我也给他一个配套属性,对吧,叫做什么呢?叫做div吧,啊然后我是div啊,我有K头属性。
03:04
好,现在咱们来看啊一样,我这里面在刷新,你看它也不会被选中对吧?那么我想问的是,如果说在这里边我把标签删掉了,好,我只留了什么,只留了中括号推这个时候表示什么意思,是不是就匹配所有标签都带有推属性的了,对不对?那这个时候你看刷新是不是div被选中了。没错吧,哎,也就是说只要是在这里边有标签叫配六属性的,那么它都会被选中啊好了,那我把P表圈还回来,那么咱们来看第一种格式E中号at t表示什么意思,匹配所有具有at t属性的E元素对吧?不考虑属性值对吧?那这里边要写一个注意的。啊,如果。去掉D对吧,也就是去掉我们的元素,那么表示表示什么呀?匹配所有元素具有,呃,具有。ATT。属性的。
04:01
对不对,哎,那好了,这是我们这个带有ATP属性,那接下来看咱们这里边还有一个叫什么呢?E中国号atd等于一个VLVL什么意思,叫做v Le值的意思啊,V Le value值的意思啊,那么它表示什么意思呢?匹配所有ad属性等于VL的一元素,那咱们来看啊,比如说这里边我把它。注释掉了,注释掉以后再继续来匹配,比如说P标签对吧?Pile k two属性等于等于什么呢?等于这个叫做Z啊等于Z,然后我让它的BCK。B等于什么呢?等于pink背景颜色变成粉色,那现在我们来看这里边来刷新,你看是不是只有第一个变了,对不对?因为什么?是不是只有第一个的这个推属性等于这对吧?这个推属性等于这什么,不等于它等于的是什么?这次A和test是不是这么一串内容啊,对不对?而这个呢,K度属于什么?是div,就算我给它,这次它会变吗?它也不会变。
05:01
对不对,为什么?因为我前面是不是还有一个标签的约束,我说是P标签对吧,黑头等于这次的,我才能干嘛才让进行改变对吧?所以只有第一个符合吧,哎,那也同样,如果我把P标签去掉,也就是配等于Z的,那这个时候div是不是也会被选中。对不对,为什么,因为div的这个tablele是不是也被我改成了这个,哎,这就是咱们的这个属性选择器,也就根据根据属性值啊,或者属性名来去选择某一个元素啊。好了,那这个时候我把它再还回来啊,那也一样,在这里边也要注意的是。如果去掉一。那么表示匹配。所有这个元素。属性,At t at t属性等于VL的等于VL的。好,这就是咱们的属性选择器啊,那么咱说了属性选择器一般用的哪居多呢?用的一般用的input元素居多,比如说input taste,你看所有的input是不是都会加有不同的这种类型啊,对不对?哎,通过type我们来区分它是什么样的域对不对?比如说这里边我再来一个input,等于ideal radio,对吧,这是一个什么?这是一个单选的对吧?现在你看我来刷新。
06:20
对吧,这块有个单选的,这块有个输入域的,没错吧,那比如说我在这里边我可以干嘛呢?你看叫我做,我找到所有引铺的标签,当然我不能这么去改,对吧?如果我这么样去设置的话,那它所有的也步骤是不是都会变换呢?比如说这里边我再加一个啊,我在它的后面,我再加一个什么呢?再加一个。Input等于PSSWRD啊,Password对吧,这是我们的密码域啊,那现在你看我没没改是吧?来比如说我让所有的input的背景颜色变成。Pink粉色。好了,那你看这个时候来刷新,你看是不是都变了,这个是单选,它不会变啊,但是呢,咱们说了,比如说我只想让这个普通文本域去变化啊,那这个时候怎么办?我就不能用这个input了,我就可以干嘛,Input type等于等于什么呢?等于这个。
07:11
Past,哎,普通文本域的,那这个时候我们再来刷新,你看是不是只有第一个变了对不对?哎,同样我还可以干嘛,我可以给它设置宽,比如说让它大一点啊,宽度比如说给他多少呢?给他200像素对吧,然后高度呢,我给他50像素,那现在你来看。酸性它是不是变大了,看到了吧?哎,那OK,这就是咱们的这个属性选择器常用的地方啊好了,那么了解过属性选择器以后,我们再来看什么呢?再来看这个状态伪类选择器,这个状态伪类选择器啊,它就是为某一个标签在不同状态时啊给的这个几个样式,那么目前我们所学的所有的标签是不是只有A标签会有不同的状态,会有哪些状态,当你鼠标放上去对吧?当你点击就是激活的那一刻对吧?当你这个链接未被访问的时候,对不对?所以整个这一组都是为什么呢?为我们的A标签去设置的样式啊,那其中只有一个号是所有标签都可以使用啊所有标签。
08:13
都可以使用,剩下的这三个是不是都是针对A标签的,你看设置元素在被用户激活时的样式对吧?设置超链接A在其链接地址已经被访问的样式,设置这个A在未被访问时的样式对不对?哎,但是如果大家记住,如果我们想给A设置这四个样式,必须按照这个顺序,先是link,再是VI,再是ho,再是active啊,必须按照这个顺序它才能识别啊,所以这个呢,我一般作为了解级别就可以了。啊,了解级别就可以了,好了,那咱们就来看一下,比如说在这里边我有个A标签对吧?HTTPHTTP冒号新线3W点百度。Com。好了,然后这句话我们去百度,那么在去百度这里边一样,我给他一个他给的跳转方式TG,他给的给他一个杠block,对吧,然后咱们来看刷新,我这里边有一个去百度,现在我是不是没被访问,没被访问默认这个字是不是紫色呢?哎,那我也可以给他改变一下,比如说在这里边。
09:13
咱们来看啊,A冒号link,当A标签未被访问的时候,我让它的字体颜色变成红色,那现在你们来看刷新。哎,有变化没有是吧,那你就证明这个东西还不好使,没错吧,哎,不好使怎么办,我先清除一下啊,来这里边点击呃。清除历史记录。清楚好了,然后我们再返回到我的页面来。所以也没有变化。对吧,那OK,那我只写了一个对吧,A冒号link它不好使对吧,那不好使怎么办?我们再继续往下写呗,还有什么呢?还有设置超链接A在地址已经被访问的样式,我们再设置它看看来比如说A冒号。
10:06
他已经被访问了,那我就给他一个什么绿色了,对吧,那现在我们再来看,再来刷新。变绿色证明什么证明这个例子已经被访问过了,对吧,但是我有访问吗?其实没有啊,根本还没有点击呢,对不对,哎,不要紧,一会儿我们再清铜,再清出,再再刷新啊,算了,直接在在这清出正常的是可以的啊,来再清一下啊。嗯,清除历史记录。因为有可能是什么,有可能是这个编辑器给我做的伪环境的问题啊,这个编辑器给我做的伪环境的问题,那我们直接在这里面来访问来。这里边。叫做零四。打开。好,你看现在是红色对不对,因为他什么没被访问过啊,那OK,那访问过以后肯定是绿色对吧,那咱们点击访问,访问完以后你看回来是不是变成绿色了,看到了吧?哎,这是没有问题的啊,那同样我们给它刷新,还得清除一下缓存啊,清除一下历史记录,呃。
11:10
工具选项。然后。安全与隐私。清除数据。清除吧。啊,清除绿就入在这了,完了我把我的柜都清清了,不要紧,也清了啊,清完以后再来刷新回来是不是变成红色了对吧?然后他还有什么样式呢?它还有几个样式对吧?这里边叫做A冒号号啊,当鼠标移动啊,就是鼠标悬停时,悬停时比如说我给它一个pink粉色对吧?那现在我们来看啊,这里面同样刷新一下鼠标放是变成反射哪种对吧?然后另外还有最后一个什么呢?是鼠标激活时的样式对吧?那也就是这个A冒号,呃,Active。
12:01
Active,当鼠标激活时,我给他一个什么,给他一个紫色PRP,怎么叫鼠标激活呢?就是鼠标点击与释放之间,现在你来看啊,我现在默认没访问,它是红色对吧,鼠标放上去它是这个粉色对吧,激活就点击,但是我现在我没松开,松开是不是就弹走了,哎,我松开。它的探头啊,这个时候是你看是不是紫色对吧,那么一松开。松开来,你看访问了,访问完以后回来。刷新刷新刷新绿色还不变,看到了吧,我们把它。再重来一下吧。重新刷新一下,我们默认访问完才绿色对吧,来再来点过去。回不来。重重上一下,重新打开这个页面吧,还是比较麻烦的,对吧,测试这个效果来打开。好了啊,现在是它是什么红色对吧?来放上去,粉色点击释放,紫色松开。回过来。
13:00
啊,还不好使了,绿色不变了呢,我看一下绿色。嗯,LVHA,我的顺序是对的啊,字体颜色看了变成绿色,当访问过后,那么他没给我记录访问,没给我记录访问,那怎么办?应该是我没有网,那我还是回到这里边吧。这里边。通过他来访问。你看他访问默认就是绿色了,对吧,来换一个浏览器。好了,它是红色没问题对吧,放上去拿走,点击紫色再弹开,然后回过来。啊,它变还不变绿了。看到吧,它不变绿啊,因为什么呢?因为这个东西我没访问到,是不是,那我们换一个换一个本地的网址吧,来。呃,不用这个了啊,我们给他一个本地的。协议,但是我先看一下啊,我这里面走的,这里面走的应该是一个伪服务对吧,那这样的话我就得给他一个什么呢。嗯,点点当前目录吧,直接当前目录零二。
14:02
基本选择器好了,现在再来刷新一下啊,刷新现在是红色对吧,然后放上去点击弹走到这个页面回过来是变绿了对吧,因为什么呢?他能成功的打开这个页面,而这个百度它始终成功打开不开,打不打不开,哎,所以他。所以它变换不了啊,这个是咱们A标签这四种样式。但咱们说了这里边啊,其他三个这个这两个和这个你作为了解级别就可以了,而这个呢,是我们最常用,因为什么,因为所有标签都可以使用,对不对,还记得我们在去写表格的时候,我是不是也用过这一个东西,对吧?我可以干嘛呢?让他进行什么隔行换色对吧?比如说咱们换我给他一个ULUI里边我给一个Li,这是我们的什么无序列表,对不对,那好,我们就拿这个无序列表,我也简单给大家写一下内容,对吧?写完内容以后,然后我们通过什么,通过这个。我们也来控制一下啊,比如说这里边叫做打野。七。即香港角。
15:04
谁呀,是不是盲僧对吧?然后再来Li还有什么呢?还有生嗲柔体把。寻找。这是谁呀?这个安妮吧?然后。风筝。大剑五只鸟,大剑,大剑。五只鸟。然后这个叫。寒冰。叫做传送偷塔大招跑,这是谁啊,这是这个剑圣是吧?剑圣好了,比如我就给这四个啊,那现在我们先来看我们的页面刷新是不是有这样的一个效果对吧?那我想做什么,鼠标放上谁谁变换颜色啊,鼠标放到哪个,哪个字体变换颜色,那这个时候怎么办?是不是我就可以这么去选择了,咱们来看啊,这里边叫什么u Li Li,这里边的Li冒号号,当鼠标移动到Li以后干嘛呢?我让它的color字体颜色对吧?变成什么?变成这个,呃,PP紫色好了,那现在咱们来看啊,这里边同样我刷新,刷新完以后鼠标放。
16:17
好,你看是不是放到谁那谁变换。看到了吗?同样我也可以干嘛呀,我也可以给它加大呀,放到到size,比如30像素对吧,那这个时候来刷新,你看鼠标放放放是不是放到谁那谁大对吧,谁大,而且还变换了颜色啊,这就是咱们的这个什么呀,属性啊,选择器的不是叫做什么伪类选择器啊,这个how how是可以给任意标签用的,而其他的这几个属性只能给A标签用,而且在用的时候还必须按照这个顺序啊,你不按照这个顺序,它也不一定能出现我们最后看到的这个效果。知道吧,哎,某一个样式可能就不好使,所以大家在用的时候,如果你需要用的话,那这四个顺序必须按照我这个顺序LVHA啊,必须按照这个顺序才可以啊,而这就是咱们的这个属性选择器及什么状态伪类选择器。
17:06
好,这就是咱们在这个阶段,我们需要去了解的所有的选择器啊,那么会了这些选择器以后,接下来我们还会有一个问题,什么是什么问题呢?就是选择器的优先级的问题啊,咱们选择器其实默认的情况下,它是有优先级呢啊,咱们叫优先级呢,选择器的优先级有一个什么,有一个分数啊,叫做选择题优先级啊。这个分数,那什么分数呢?标签选择器,标签选择器啊,它的分数为一分啊,然后这个比如说伪元数。为元素啊,这个元素我们没有学对吧,那我先不说啊,比如类选择器,它的优先级为十分。啊,最终它是比分的,谁的分数最大,谁的优先级是最高啊,然后还有什么呢属性。选择题。选择器它的优先级也是十分啊,然后还有什么呢,还有这个ID。
18:04
选择题选择题。他的优先级,优先级为100分100分啊,然后还有什么呢?还有我们的这个通配符对吧,通配符这个优先级为零分啊。通配符。优先级为。零分零分啊,所以最终他是什么呢?他是把这些分数加到一起,比如说啊,比如说在这里边我写一个例子,比如什么呢?比如说我们这里边来个body对吧,Body里面有个div对吧?Div。里边有一个叫井号box什么东西,那它的分数是多少,它的分数你看它是标签选择器,前两个做标签选择器对不对,这个呢,是不是这个ID选择器,那它的分数就是一分加上一分加上100分啊,那他的总分是不是就102分对吧?那如果这里面再来一个,比如说还有什么呢?我还有这样的比如说。呃呃,点点什么点万。里边的井号box对吧,那这个时候它是多少,它就是十分,加上什么100分,那它就是110分。
19:08
对吧,这叫102分啊,100分啊,这是100分。啊,所以他的总分应该是102分对吧,而他的总分是多少,是101分,那同样比如这两个都是代表一个标签,那你说他听102分还是听一百零一一百一十分的,是不是他分高,他的分数高就以什么以他为主就去听他的啊这是咱们的选择期优先级,来我们可以测试一下啊,在这里边。我们新建一个文件本,上面文件叫做零五选择器优先级。哎,比如在这里边,同样我们设置一个div,对吧,叫做我是。Div。然后再来一个。第二位。我是DIV2,好了,有那么这两个div,那么在这两个div里边,我同样给他一个class等于什么,等于Y对吧,然后再来一个ID啊,等于一个box啊,那这里边呢,我们也给它设定一个,呃,设定一个什么,就设定一个class吧,Class等于什么?等于一个呃,Two好了,那现在咱们来看,比如说我先用标签选择标签染器,咱们做的是不是就一分的对不对,那我直接div给他一个背景颜色BKGR-Co等于一个红色,那现在咱们再来看啊。
20:22
不是这个页面来。你看是不是两个都是红色了对吧?哎,没片题能变,但如果一旦我改变,比如我说点one的,点one的BKGR-c color为什么为这个yellow黄色,那你看咱们one的这个十,这个class是不是十分标签感测器是不是这个一分啊对不对,所以这个时候你看他听谁的。是不是他变了,对不对。哎,那同样这里边还有一个ID是不是100分对吧,那如果是100分的话,那这里边井号box。B color等于什么?等于这个,呃,B blue。
21:04
刷新你看是不是变蓝的了,对吧,最终是不是以他为主了,因为他的分数是不是最高啊。对不对,哎,那同样,那比如说在这里面,我给他也设置个ID,也叫box。对吧,也叫box,那等看啊,它的叫box不,我不给他设置啊,我再来一个。那你看好了啊,比如div里边又包含了一个div对吧,或者我包含一个P吧,啊包含一个P,然后呢,它的这个名称ID叫做什么?叫做box啊,叫做我是一个P标签。P标签好了,那现在咱们来看刷新。这个P标签是不是也会变对吧?那么我要想改P标签的话,我要想改这个P标签的话啊,怎么改,我还能直接在这里面改吗?比如说我想要P标签,我只想要P标签变颜色啊,咱们来看我这里边,我说div里面的P符不符合要求,符合吧,Div里的PB跟GRUD,我想让它的这个Co变成什么呢?变成这个RQ。
22:07
这个时候你看能不能变。走,你。行吗?不行吧,为什么不行,因为一个ID选择器就是100分了,你这两个标签选择器才多少分,才二分,二分他能超过100分吗?不能,所以他变不了,对不对,所以我要想要变可以怎么办?我可以在这里边直接是这里面的井号box对吧?那你看div是一分,这是100分,那加起来是不是就是101分对吧,那是不是就可以概括他了,盖过他了,那这个时候你看走你。是不是就变换颜色了,看到了吧,哎,这就是什么,这就是咱们的选择期的优先级啊,选择期的优先级啊,那如果是同级的话啊。比如说你像这个啊,这个我也给它叫做万对吧,两个都叫做万了,对吧,他俩是不是就同级啊,那同级的话就是谁在后谁优先啊,那你看我把这些都注册掉啊,注册掉以后我们来看先看点one的来刷新来,你看两个都变黄了对不对,那比如说现在啊。
23:00
我这里面想设置点吧,不管怎么写它都是什么都是一样的,比如说里面的color的字体颜色,字体颜色变成红色,那你看两个是不是都会变化。两个是不是都会变化对不对,哎,那比如说我只想操作这个Y,哎,不行,我得换一个标签啊,来再来一个P标签吧,P标签这个叫class,等于。One对吧,我这里写就是我的class是。万,我的CLASS10万,现在咱们来看刷新,你看这个P标签也是符合要求的,对吧?那么这个时候我要想单独去改这个P标签,我可以怎么办?我可以这么写,比如说p.Y。p.Y什么意思?就是P标签叫万的,那你看P标签叫万的,这里边我只要用了一个P标签,只要用个标签,它的分数是不是加一,那它是不是就11分了。对不对,哎,我不一定非要说我找这种关联,我说div里面的P像刚才那么我说div里的boss对吧,我也可以直接为了提升优先级,我直接加上这个标签名,也就说div不是这个P对吧?P叫什么叫点万的,那这个时候他就分数是不是就比刚才那个慢高了,P刚才慢高了,那这个时候来白色多上的高差了,我们给他一个什么呢?给他一个紫色,那你看现在这个P标签的背景颜色。
24:14
是不是变成紫色了对吧,因为这个字体我没有设置,所以它依然是红色,那我给它设置一下变成什么呢?变成这个WH白色,那现在你来看。刷新是不是变白了,看到了吧,哎,这就是什么呢?选择器的优先级啊好了,那选择器的内容在我们第一阶段啊,我们就介绍完了,也就是。这些选择器啊,基本的层级的,属性的,还有这个为这个状态为类了,以及选择器限级啊,所以下来以后大家一定要把这个选择器多多练习,因为选择器我们会的越多,在我们去布局页面的时候,我们就会越轻松越容易啊,其实对于选择器而言,你说就我光会一个这个,比如说就光会一个class选择器够不够用,够用了,光会一个ID够不够用,够用了大不了我就多定义点名称嘛,对不对?哎,只是我们会的越多,在不同结构上我们用的就会,干嘛越轻松啊,这就是咱们用选择器的目的。好了,那这节课我们到这里。
我来说两句