00:01
好,我们继续来上课啊。那么这节课呢,我们再来讲一下我们的这个csi新增的选择。那么一部分我们先来看一下我们的属性选择器啊,那我把这些就直接都复制过来了啊,然后在这里边我新建一个文件。叫做H天麻吧,呃,这里边写上叫做零八啊,CSS新增选择器好了,那么咱们来看啊,这里边一样CSS新增。选择题。好了,然后我把这些选择器啊,都放到了这个的注释里边啊。好先放过来,放过来以后我们来看啊,咱们这里边叫属性选择器,属性选什么意思呢?就是根据属性的名或者属性的值来找到某个元素,对吧?这种选择器啊,一般用什么用的多呢?对于匹配form是最好用的,因为form标签里面所有的存,所有的这个标签是不是都带属性的,对不对?你比如说这里边我给一个P标签,那P标签它是没有默认情况下是没有属性的,对吧?我需要干嘛在这里边去给他加属性对吧?比如说我加个ID啊,我加个class呀,我加一个title啊对不对?呃,加T这样的话才可以,没错吧,比如说我这里边给他一个啊,那OK,那么我要想选择这个P标签,我怎么选择呢?比如说这批标签里边我们给一个内容啊,叫做。
01:15
这是。一个神奇的P,好了,那么咱们来看啊,在这里边我通过style标签标签来去找这个样式对吧,那么之前啊,咱们说可以用直接找P,这没问题对吧?或者说我给他ID或者给class都可以,那现在呢,我可以一样,我说找P标签中括号里边干嘛呢?带属性的啊,带tle title属性的,然后我开始对它进行设置,那么咱们来看啊,比如说这里边我再给他一个P啊,叫做。检测你跟女孩的关系。看女。孩儿。放屁的程度,好了,那咱们来看啊,这里边两个P对吧,那么我是说我要找的什么P带K头属性的没错吧,那这个时候好,我直接让他干嘛呢?我让他BCGRD白上变成红色好了,那咱们来看背景颜色能不能变成红色啊。
02:10
这里边我把它都关掉了吧,啊没用了,来关掉。关掉以后一样我们再来打开。好,你看是不是它变了对吧,包括比如说这里边啊,我再给,比如我不给P了,我给一个什么呢?我们今天新讲的叫selection,它是一个区块标签对吧,那这里边也写了,这这是一个区块标签。好,那写完以后,现在你看啊,我在这里边给它加一个什么,加一个K头属性,K头属性也等于K好了,那么现在我想问的是它能被选中吗。能吗?不行吧,哎,你看好了我再刷新,他没有被选择看到了吗?哎,为什么呢?因为我这里边是不是给的说我是找P带配头属性的,对不对,那如果说我把这个P删掉的话,那叫什么意思?那是不是就匹配所有属性,有配动属性的这个元素,那现在这会你看它能不能被选中啊,来再来刷新,你看它是不是被选中了,哎,这就是咱们这个E-at t,这个E代表什么意思,代表的元素啊,E代表的是元素,也就是我们的标签at t呢,什么意思呢?代表的是attribute代就是我们的属性啊at t代表属性,所以这里边记住啊,如果我把E去掉的话,把E去掉的话,代表匹配所有这个属性啊,那么整个加一起的E中号at t表示什么意思啊,匹配所有具有at t属性的一元素,不考虑什么样,不考虑属性值啊好了,那接下来,接下来干嘛呢?我再来考虑属性值的,你看at t等于VR什么意思,考虑属性值对吧?那比如说这里边同样我给他一个tle,等于等于什么呢?等于hello啊这回有两个都是K对吧,但是呢,属性不一样嘛。
03:47
好,那现在咱们来看啊,我把这个。之前写的这个注册量。来把它注释掉啊,注释掉以后,现在我们再来这里边还是一样P找title的,对吧?如果我直接找title的话,这时候这两个P都能被选中,没错吧,给了个orange or好了,那现在咱们来看这两个上面这两个都能被选中,因为两个都是P标签,没错吧,P标签都代替的属性,哎,那现在我给他再加一个等于等于什么呢?等于T的。
04:15
T等于title的,那这个时候我们再来看走你你看是不是只有这一个了,对吧?因为什么?因为它不等于title,它的这个title的属性值是什么?是不是叫hello,哎,所以这里边如果我给它改成he hello hello啊,给它改成hello的话,那这个时候它才能被选中,看懂了吗?哎,这就是咱们属性对属性值了,那再往下来还有什么呢?还有这种波浪线等于的,它是什么意思?你看匹配所有属性具有多个空格的值,其中有一个等于VL的,看到了吗?那也就是说在这里边,比如说我这里边经常我们属于什么class会起多一个值,对吧?Class叫做类名的吧,比如说y two three这三个我是不是都可以啊?哎,那这里边也一样,比如说class等于什么?等于这个,比如说等于一个two啊,完了,等于一个,呃,Four four是吧,我给了两个,那好了,那你看这里面是不是有多个属性值,而且都是用空格分割的,那现在比如说我想找找谁呢?我要找这个。
05:12
P标签中号,然后T啊不对,是class属性,Class属性叫什么?波浪线等于有有哪个值呢?有这个to的,有这个to的,我让它的背景颜色background变成什么P好了,那现在你看几个能变。周敏。是不是两个都能变,为什么?因为这两个属性中是不是都有带to的对不对,如果我给它设置其中一个,比如说TH1,诶错了啊。给他改一下叫TH。I,好了,那这个时候是不是就只有一个能变了?看到了吗?只有这一个,因为这里边有这个iee的属性嘛,哎,这就是咱们的这个。属性转折器啊,波浪线等于,那这个呢,竖杠等于这个作为了解就行了,它是匹配什么?匹配这种具有多个连接分隔符的,其中有一个是以什么?以VL杠开头的,就以这个值,然后杠开头的元素什么意思啊,比如这个经常会匹配语言的,比如说在这个里边啊,我加一个叫他们LG等于,等于什么呢?等于Z-N对吧,经常会匹这是语言的啊,那你看这个时候我想匹配它,那我就可以干嘛呢?E selection中号对吧?然后呢,我要匹配的是哪个属性叫做呃,L。
06:23
LG,然后波浪线,波浪线等于等于什么呢?等于这个ZH-en的,然后我让它的BK加ND变成一个红色好了,现在你看它能不能变化啊来刷新。一稍息。WHY?这里边。没给他什么,没给他引号啊值你要给他引号来再来刷新。诶。其中是一,哦,错了。给他JH就可以了啊,就是表示它以ZH开头。哦。开玩笑,来我看一下啊啊,这块打错了吧。
07:03
叫做LA啊language这个属性等于ZH开头的,好了,这回再来刷新,看这回是不是红色了,哎,那么一样啊,这块比如说我这块,我要是不给他呢,看可不可以来走你。你看是不是也行啊,这块他没有强制要求啊,就是值我们不给这个引号也没问题,那也就是这块,呃,值我不给他引号是不是都没问题啊,但是规范的话,我们尽量还是给他一些要好一些啊好了,因为它必竟是值嘛,值我们肯定要给它引起来,而且它是一个这个什么值,一个属于字符串的值对不对?哎,它表示什么?必须是以ZH开头,那我直接写成我这也杠1N那行不行,来看一下ZH-1N走,你是不是也可以匹配到,哎,但是这里面要注意啊,各位这个属性基本上不用,因为没有再去匹配语言的了啊,所以大家了解就可以了,好了,这就是咱们这个竖杠匹配什么呀,匹配所有属性具有多个连接风格符的值,其中有一个值是以它开头的一元素啊,那么一样啊,这里边所有的属性转集,我只要把E去掉,是不是就匹配属性最值啊。
08:01
对不对,哎,只要是不写元素,也就相当于这里边只要不写元素,那就匹配,匹配什么属性对应的值,属性对应的值就是这个意思啊,好了再往下来还有什么呢?还有这种的啊,这种是咱们CS3新增的,其实这些属性CR2里面就有啊,这种的是C新增的,它是根据正则的语法来匹配的啊,这个表示什么?以什么值开头,这个表示以什么值结尾,这个是表示什么,只要这里面带这个值的就行。啊,带这个值的就行,那咱们来看啊。这里。嗯。你再来一个还是P标签啊,我统一都P标签了啊,我也都用title了,来PI,然后这里边来一个叫做好吗。叫做我是一个新的P。好了再来。再来个屁。还要抬头。然后。等于我好。好娇柔,我也是一个新的POK,好了,那给完这么多内容以后,接下来我们再来看这里边有四个P对不对,那么我开始来匹配啊,那么把它注册掉了,再来找到这个P标签,然后中括号,然后呢,哪个属性T属性怎么样呢?不,这个阳符等于以C开头,比如说我要它以。
09:16
H开头的,H开头是不是这俩呀?哎,那OK,我将它以H开头,那么这个时候我们开始进行来匹配啊b GR ground,给它红色换一个颜。好了,总理你看好了,我这三哦,三个都能匹配到吗?不对吧。这还有一个看到了吗?来把它注释掉啊。它只能匹配到两个对吧,因为只有这两个的属性是不是以H开头,你看啊,这里边是不是只有这两个属性是以H开头啊,对不对?哎,那以能以H开头,我还能以什么能以H结尾的P,这里边继续Dollar等于等于什么呢?等于O,我让呢以O结尾的back ground让它变成什么呢?变成yellow green好了,那我把这个给它注释掉啊,注释掉以后,现在你看匹配O结尾的都有谁啊,这里面是不是有一个她是O结尾的,还有谁她也是O结尾的对吧?哎,也就检测你跟女孩的关系,还有一个我也是新的P,那现在咱们来看。
10:10
走,你是不是这两个变成了黄绿了,哎,那OK。那么最后一个这个星号等于啊,那星号等于的话,就只要这里面有就行了啊,那就随便写一个,比如说tle,然后什么呢?星等等于什么呢?等于一个O吧,看这里边都哪些有O啊,BK加N,然后我们再换个颜色,再换一个什么的,再换一个它。来看这里边有O的啊,诶我匹配O我不如匹配E也行啊,有O是不是三个都有O啊,哎,那这你看这三个是不是都能匹配到来刷新。是不是三个都能匹配到对吧,只有第一个,第一个是什么title匹配不到啊,第一个是不是直叫title title tle吧?哎,那OK,这就是咱们CS3里面新增的这种属性选择器啊,那么这就三个属性选择器作为了解就行了,因为他们用的是正则表达式啊,所以这个一般用的比较少啊,一般常用的比较多的就这两种,这两种用的是最多的啊,所以一定要记住啊,这几个都要记住啊,那么包括如果把这些E都去掉表明什么,是不是直接匹配有这个属性等于这个值啊对不对,这个是什么?匹配这个属性应该是以这个值结尾的吧?哎,那OK,好,这个是什么呢?属性选择器啊好了,那属性选择器完事以后我们再来看下面的,下面再看什么呢?就是我们的这个伪元素选择器啊,叫结构性伪类选择器。
11:27
来继续,我这里面再新建一个文件啊,叫做HTML文件,叫零九。叫做为。结构性伪类选择器。好了,结构性伪例选择器啊,这个结构性伪例选择什么意思呢?就是在CI中引入的这种结构性伪类选择器的共同特征就是什么呢?我们允许啊,或者是这个,呃。说CSS吧,不能说我们啊,就是这个在CS这个结构。嘴瓢了啊,在C中引入的这种结构性维的选择器呢,他们的过程当中就是允许开发者根据文档数中的结构来干嘛,来指定元素的样式啊,根据文档数中的结构,那文档数是什么样?是这样的,你看好了,我这里边来给大家画个图啊,比如说我们正常有一个文档对吧?文档,这就相当于一个A页面嘛,咱们文档最里面什么叫do文档对不对?在这个文档里边我们会放置这么几个标签,三个标签,准确的说,哎,不对,是两个标签啊,准确的说哪两个标签呢?一个是他的头生灵头。
12:31
叫叹号do c TP合同莫勒对吧?另外一个标签是什么呀?是不是就是我们H标签,也就是在这里边会写一个HTML的标签HTML对吧?然后HTML标签里边又会包含什么,又会包含两个标签了,哪两个标签是不是一个是一个是我们的body。这里边叫做hed,对吧,然后这个呢叫做borderer,然后在borderder里边,在hier里边是不是都可以代替包含标签呢,对吧,可以包含更多标签,包在里边也一样,比如说包在里边我包含了一个什么,包含了一个selection标签。
13:14
叫做SEC selection标签对吧,然后呢,在selection标签里边,我可能可能还去干嘛再去包含其他标签对吧?哎,这种结构是不是就是一个倒数的结构。对不对,这种结构是不是个倒竖的结构,怎么叫倒竖啊,我们倒过来的对吧,就相当于树根,然后往下开始是什么枝叶,没错吧,那一样,我们比如说给它剪切下来,我粘贴一下,然后我给咱妈旋转了,哎,不是同学那了是旋转,旋转多少呢?旋转这个180度,那你看这是不是就相当于是一个正数了,对吧,这底下是树根,上面是数枝树叶了,哎,那我们这个CS3呢,或者是CS3,我们这个结构性尾的选择性呢,说白了就是根据这个文档数的这个结构来进行选择的,比如说我找到了它的这个副类,我可以找它第一个子类,第二个子类,第三个子类,第四个子类,就是这个意思啊,那OK,那么了解了这个以后,我把它保存一下啊,叫做。
14:04
文档数结构。C盘。百643W下边的class下边呃零二下边on下边的这里对吧。叫做。文档树结构啊。文档。是。结果好。那OK,把它关掉,了解之后我们把它关掉啊,关掉以后在讲它之前,我们先看这个有一个伪元素选择器啊,它是四个伪元素选择器,什么叫伪元素选择器呢?叫就是不是对真正元素进行选择,也就这四个啊来。好看好了,叫伪元素选择器,就是不是对真正的元素进行选择,那比如说在这里边一样,我们再来一个selection e,对吧,Selection里边我们可以进行一些内容的编写,比如说这里边我们写一个什么呢,叫做。
15:05
嗯。你好。我是。是徐骁雄对吧,这个名起的还是比较那什么的啊,这个这三个叉啊,都是我的名好了,然后接下来呢,我们再往里面去写这点内容。呃,这点内容太少了啊,我再加点儿内容吧。我把它。换掉吧,叫做咱们写点励志的话吧。比如说,呃,有多少人嘴里。喊着努力对吧,其实只是叫,其实只是躺在床上。想想。
16:01
想想啊好了,那OK,这里面有这么一句话啊,但是这一句话呢,目前来说还比较小对吧,那比较小的就比较短啊,不是比较小,因为我占不了这个,那什么嘛,占不了整个一行啊是这个意思,好了,那咱们来看啊,我先来刷新。OK,那现在接下来我要看你对它进行什么进行操作了,那怎么操作,第一个你看叫做first Le什么意思,E元素的第一行啊,就是哪个元素的第一行,那咱们来看啊,我在这里边style,你知道第一行有什么吗?就不知道对吧,所以我说selection。冒号first。了,哎,它的第一行谁也不知道他的第一行是什么,对吧?所以这叫伪元素选择器啊,那么第一行什么都有可能,对不对?哎,现在我的第一行大家知道肯定是这一句话了,对不对?那这句话干嘛呢?比如说我这里边让它found当size为二次像素,然后color给它变成什么呢?变成一个PPU。好,给它变成这个颜色,那现在咱们来看,我整个这一行是不是都变了,这是不是都是我的第一行啊?哎,那比如说在这里面突然我给它加了一个BR标签换行了,那么在这块换行了,那前面这块是不是第一行,这是不是就属于第二行了,那现在你再来看。
17:11
周礼。看到了吗?是不是换行的效果,哎,当一换行以后,他就不再是第一行了,不再是第一行,他是不是就不享受这个待遇了,所以说吧,哎,这就是咱们的这个第一个啊叫first,那么有它还有一个什么first letter,它叫E元素的第一个字母,那么一样,比如说secret select,它的第一个字母谁也不知道是什么,对吧,那这里边叫什么,叫做first,然后这里边比如第一个字母我,然后一个。对吧,哎,这就是他的第一个字母吧,哎,那OK,这叫什么first-letter,那再下来还有什么呢。还有一个叫before跟after,它是指的是在一元素的内容之前跟一元素的内容之后啊,那OK,我们来看一下,现在我用div用那个S,我觉得这块我用个div啊div我来一个什么呢?来一个迎风。
18:09
迎风匹萨。好了,来一个迎风披萨,那么找谁找div对吧?那这里边叫做div冒号,By before div元素的内容之前注意,在内容之前你能干嘛?我在内容之前我让内容I found size变成100PX,你看好了,我这里边来刷新。有效果吗?没有吧,内容之前,内容之前有东西吗?没有东西,没有东西,你用它有什么用?根本就没有用,对不对?哎,如果现在有用怎么办?记住我们在使用b before,就是这种内容之前就这两个啊,一个b before,一个after,一个就是在一元素内容之前和一元素内容之后,用这两个属性的时候,必须配合一个content的属性,干嘛呢?添加一个内容,比如说我加一个什么呢?叫来小母牛。啊,小母牛好了,那现在我把它小点了,这个好使了,我给它设为30张数啊,那现在我们来看走你你看小母牛是不是就大了,哎,这是不是在这个一元素内容之前添加的这么个内容,诶添加内容以后接下来干嘛,我可以给它设置大小对吧,包括设置它的这个颜色啊,那我需要怎么设置,我就可以怎么设置了,对吧?比如再来个紫色吧,那。
19:16
刷新是不是也变颜色了,哎,那这是在内容之前,那在内容之后呢?Div before不对,叫after am,然后呢,内容之后干嘛,比如说抗的,只是大家记住一定要配合这个属性啊,抗的比如说叫什么叫做凉快。凉快。然后在这里边再来一个。Found干S给它20像素这个小一点啊,然后呢,给它color,给这个颜色叫做blue蓝色,好,现在我们来看这里边往后你看两块是不是加进来了,而且是什么,是不是在内容之后加了,哎,这就是这两个属性啊,一个叫什么,一个叫before,在某个元素的内素之前,一个叫after,在某个元素的内容之后啊好了,那再往下来。
20:02
这几个属性了解了以后,接下来我们看什么呢?我们再来看这个伪类选择器啊,伪类选择器,那么刚才我们也给大家介绍了这个伪类选择器,咱说了是干嘛呢?是通过这个允许开发者啊,根据开发档这个根据这个开开发者根据文档数中的结构来指入元素的,那么开发之前我们先来了解四个最基本的结构区位的选择器啊。好了。这里面,呃,我也再新建一个文件吧啊。D。十啊,叫四个最基本的结构性,结构性伪类选择器,OK。来一样,把它先注释到这里边来。好了,这是咱们这四个看好了四个最基本的精本来器有哪个一个冒号入的,它是干嘛的,将样式绑定到页面根源素,根源素是谁呀?大家再看一下我刚才画的这个图,图呢图呢图呢诶我没保存到这里啊这呢啊文档数这里边的根所谓的根是谁?是不是这个document对不对,那么document会包含这里边,那我把样式绑定到跟说白了,最终我们能看到页面是不是只有body部分,是不是就相当于干嘛,相当于是吧,包含整个A玩意部分,但是最终看到了样就记住啊,我们看到了样式,只能看到body垒的样式对不对?哎,所以这里边咱们来看啊。
21:20
因为只有包是在浏览器的窗体里面,承载着整个窗体让我们显示对不对,那比如说这里边我就直接在这设置了啊来style标签,然后呢,我冒号root不需要免标签,因为什么它是直接绑分的,你根是谁啊,不知道不道谁根是包含HT怎么。整个A部分的内容对不对,那我冒号入给他一个BAGR背景颜色,我让它变成什么,变成这个orange好了,那现在你来看我整个这个页面背景颜色是不是都变成了这个橙色了,对吧,因为我说了咱只有包的你才能呈现出我们看到的这个页面,没错吧,所以绑定到跟你类似于我们看到效果类似于什么呀,我直接给body设置一个样式back,然后比如说给他一个什么呢?给一个紫色,那你看。
22:05
走你诶不行,他的优先级高啊,我得把它注注注册掉,因为他绑定到跟上了啊来。走你好了,是不是才是紫色看到了吧,哎,所以大家记住啊,这个东西给谁绑的,就是给刚才我们画的那个图,类似于什么document文档啊,绑定到根元素上啊,好了,那知道这个属性以后再往下来,一般的时候我们肯定很少用这个属性啊,因为很少去动根,就是直接我们需要用哪个标签,用哪个标签啊,这里面再往下看来第二个,第二个叫什么呢?叫做not,是对某个元素使用样式,但是想除了这个元素的子元素,但是想排除排除想。排除这个元素下的子元素,那么咱们来看经常我们用这个会什么比较多呢?Li u Li Li这种标签我们用的会比较多啊,Li,那Li这里边比如说我给他一行AA,然后CTRLCVV。有点多啊,给一吧,然后二。
23:01
三。四。5OK,我这里边五个Li对吧,那么五个Li现在咱们来看啊,我们先给它设置一下样式啊,这里面ul。嗯,行,写都写了,来吧,给他个borderer吧,Bur border1像素实现到红色,呃,别老红色了,P紫色,好,这里边咱们再来看刷新。有了吧,有了以后,接下来我们来设置这个Li。我直接给Li标签,就是B也给他移像素。So,实线,然后给他什么呢?井号FFF,白色来。走里看是不是白色的对吧,然后同样我可以干嘛呢?我可以给它padd拍顶上下左右都为十相数,然后我们再来刷新,OK,是不是也大了,哎,那接下来咱们来看啊,我给这个Li里面所有的字体的所有的字,给它设置一个大小方size,除了这个不是除了啊方杠SIZE30像素,然后呢。
24:02
行了,先给这么大吧。好了,三个像素啊,那么接下来咱们来看,我想给这里边所有字体大小设置颜色,设置颜色,但是除了这个三我不设置,除了这个三我不设置,听明白了吗?那现在怎么办?如果我在这里边直接写我换了我再写一个啊,我再写个Li可以这么写吧,哎,设置颜色我是不是可以这样的,比如说我直接来一个这个,呃,它是什么颜色,默认黑色完,我是这个底对吧,那就给他来一个金色吧,来。叫GLGGOLD来给它来个金色啊,现在你看好了,我所有的字体都是金色,看到了吗?哎,但是我说了,我只有这个三不设置,那怎么办?这里边我可以冒号not,除了除了谁呀,除了第三个Li对吧?第三个Li我怎怎么写我那这个时候我们就得给他设置一个什么,比如说我给他设置一个class class等于什么,等于对吧?那这里边我是不就是。Y,是不是除了这个选择器不设置以外,剩下的Li都要设置,那现在你来看,我再来刷新,是不是只有三没有啊,看懂了吧?哎,这就是除了某一个啊,除了某一个好了,再往后还有什么呢?还有这个empty匹配所有的空元素,什么叫空元素?就里面没内容的呗,比如说Li看好了,我每个Li再给它加一个空的,每个Li下面我都给个空的Li。
25:18
好了,那OK,这个时候你来看啊,刷新立马变大,每个L下面都有空空的RI吧,而且这个L是不是都有边框,哎,都是白色边框。好了,那接下来我干嘛?我想把空的Li的边框给取消掉,那这个时候Li冒号N空的Li空的Li干嘛?Border board啊,Border为给它取消,取消完之后,这个时候我们再来刷新,你看所有空的Li的边框我是不是不是都取消了,对吧,包括前面那个点我也不想要,那我可以干嘛?List的杠,呃,List子的杠等于no吧,那现在我们再来刷新。点是不是也都没有了,哎,因为它没有了单位就小了,所以它这个距离就小了,看明白了吧?哎,这就是咱们的这个空的Li好,然后再往后呢,冒号他给的,注意冒号他给的前面并没有写元素对吧,因为一般我们用他给他给的什么意思,这不代表的连接到目标时对吧,跳转的目标的地方。
26:14
哎,好比我们在A标签里面给他给的是不是指的打开的那个就是打开方式,你是在新页面打开还是在当前页面打开,对吧,我更不认可是不是新页面打开啊,哎,所以这个它给的表示什么呢?表示链接到目标时是什么样的,那比如说这里边啊,咱们来看我来个A标签。然后再来个A标签啊,比如说这块来一个什么呢?来一个这个摸摸摸摸。摸谁呢?摸小胖好了,那这里边有两个对吧,那么我用一下这个锚点标签啊,在这块我同样给了两个A,但是呢,这两个A我不需要有哈属性了,直接咱们给它定义一个ID对吧?ID比如这块叫,然后这块叫什么呢?叫做糖烟,然后呢,再来一个A。
27:00
这块叫做to。啊,这块呢,这个叫做小胖小胖好了,那么接下来在这里边,我是不是直接通过井号去找谁啊,找这个万对吧,这个呢,我通过井号去找这个two OK,那么接下来我要怎么给它设置呢?咱们来看啊,我在这里面。我先给大家看一下样式吧,来。刷新一下啊,就在这呢吧,你看摸糖烟摸小泡摸糖嫣小是不是没什么效果呀?哎,好了,接下来我来实现这个效果啊,怎么实现呢?你看冒号,冒号TRGT他给的对吧?甚至我也可以写A标签,A冒号他给的是不是到达A标签目标的时候对不对啊,如果不写就直接是到达目标,到达目标时我要干嘛呢?我让它found-size变成30像素对吧,然后呢,Color c color变成这个现在什么颜色黑色对吧?那好。变成井号。FFF啊,然后放到杠W给他800。
28:01
啊,让它加粗啊好了,那现在我们来看啊刷新。你看,因为刚才我摸了啊,摸小胖,小胖没拿,摸唐嫣,你看唐嫣没拿,摸小胖摸唐嫣,摸小胖摸唐嫣,你看我是不是在这里面点谁就到达谁,那谁的字体就变样了,看到了吧?哎,这就是咱们的这个冒号,它给的作用啊,代表什么呀,代表连接到目标时啊,连接到目标时我要干嘛啊,这就是咱们的四个最基本的结构,伪类选择器,好了,那这个完事以后,我们再看它其他的结构位的选择器啊来这里面再来新建一个文件啊,叫做11其他的结构。其他。的结构。为类选择器啊,都有哪些呢?其他的。结构伪类选择器。其他啊,好了,那比如说一样啊,这里边我还是给这一行u Li,对吧,一行啊,Li u Li,那OK Li里边咱们就是这个,又是这个叫什么?呃,有序,这叫有无序列表对吧,U是无序列表啊完了,那在这这里边咱们也一样,我写的内容啊,比如说大家都比玩游戏是吧,那我就是来点妻子真言吧,比如这个叫风筝。
29:17
搭建。补之。鸟啊,是撸啊撸啊撸里的哪个人物,寒冰对吧?啊CTRLC喂喂喂喂,好了,那这里边我们换一下啊,再来一个叫打野。七季。香港脚,香港角。这是谁呀?盲僧吧,盲僧啊,然后还有呢,叫做。生嗲声嗲柔体。把。熊。这谁呀,叫做安妮吧啊?这个柔啊,不是肉。揉OK,然后再来。
30:02
叫偷塔传送。大招跑。这是剑圣吧,剑圣啊,然后再往下还有这个。呃,慢热吸血死不表。这是谁呀?这个赛恩吧,塞恩对吧,然后再来一个叫卖萌蘑菇快点跑,卖萌蘑菇快点跑。是吧,屏幕啊好了,那现在写了这么多,那么一样啊,在这里边我再加一个P标签,注意在Li里边我加了一个P标签,在Li的下边啊,我给了一个P。国王三刀真三刀。分五秒。嗯,这是谁呀,这是这个蛮子吧,蛮子对吧,好了,那现在写完以后,我们来看一下这个页面啊,来走你。
31:00
好了,目前结构是这样的,对吧,那么接下来我可以干嘛呢?我先把这个东西先删掉啊,我先不用它,先不用它,先让他这个Li,这是正常的,对吧?那么我为了让它有这个编号效果啊,我用OL吧。OL是不是有序列表啊,来刷新123456,总共六条对吧?那OK,那接下来看好了,我来怎么设置style标签,我要找Li,然后冒号叫做什么呢?First f first gun child,哎,什么意思?第一个Li啊,就是这个子元素中的第一个Li,那第一个Li是不是就是它呀,对不对,那现在我给他来设置一个背景颜色白,给他一个红色。好,那你看我的第一个Li能不能变红。是不是找到了,哎,它是什么意思呢?就是对一个负元素中的第一个子元素Li设置元素,设置样式啊,你看这个Li本来就是被它包含的,就其实在这里边所有结构都是包含的,没错吧,除了是这个呃,根不被包含,剩下的所有东西都是被是不是都被包含的,包括HTML是不是也被包含的,对吧?那你看比如说我HTML冒号first-child fireb-child行不行,是不是也行,因为什么?因为我HMR是不是也有一个父亲,他的父亲是谁?父亲是不是do问他,那这里边你看我bab ru background,给他一个yellow。
32:19
Yellow格就yellow格嘛,那你现在你看走你。我是不是也可以全都变,哎,所以这里面叫什么呢?记住了啊,它要对一个负元素中第一个子元素Li设置量好,那么能对第一个我也能干嘛,也能对最后一个,那Li冒号叫做什么last杠,Child ch l啊对最后一个Li干嘛呢?BD还是给它设置一个颜色,那比如说叫做PP。P lbg Du n啊,UNN,好,那现在我们来看错了,少一个根号,这回再来。走你你看诶最后一个怎么没没变诶。
33:02
没有是吧P。P啊,好了,这回再来走,你你看最后一个是不是又变了,哎,这就是这两个一个是什么?对第一个,一个是对最后一个,但是大家知道我们这里边不光第一个,最后一个,我们中间还有23456呢,对不对,2345吧,我这六呃六啊没有六啊,2345,那这个时候我可以怎么办呢?我也一样,我可以去选择Li冒号叫什么呢?NTH杠的啊,就是你选择第几个,我把这两个啊,第一个第一个一个最后一个,这两个东西我现在都给他俩注释掉啊。来给大家都注掉,那现在你看我用NTH杠了,我选择谁呢?我不管选择了谁,我都让它的颜色变一下,变成这个背景颜色变金色啊好了,现在比如说你看当我给的一表示什么意思,表示我选择的是第一个Li。对不对,那么第一个Li是不是就相当于我first一样的效果啊,那好,那现在你再来看我来揍你,你看是不是它变成什么,变成了金色对不对,那OK,那再来,那再往下来,第二个呢,比如说这里边我要选择第二个直接给它干嘛,改成二对吧,就表示什么意思,表示我选择第二个R,你看第二就会变了,哎,那同样道理三。
34:15
三对吧,哎,包括我说我直接跳,我直接选择五,那你看这里面是不是第五个就变了。看到了吗?哎,这就什么呢?对一个负元素中的这个指定的子元素E设置样式啊,对一个负元素中指定的选子元素Li设置样子,就是这个意思啊,那同样这里边我也可以给参数。给什么参数呢?咱们来看啊,我在这里边直接Li冒号NTHTH-Q的,我给了一个E,呃,ODDODD,好了,我给一个英文ODD,什么意思,咱们来看啊,你看到了这个你自然就知道了,比如说这里边还是一样,我给它设置一个颜色啊,设置它吧。好了,那现在我们来看一眼。走你你看啊135。
35:01
是不是奇数,奇数在设置变变换这个背景样式对不对,哎,那我能设置奇数,我还能怎么样来继续Li杠的,我还能给它O呃,E偶数啊BA BA background,再继续给它设置颜色,比如说这里边再来个颜色,来个什么呢?来个这个吧好了。走你你看是不是对它的偶数246这这样子,那你看我现在是不是马上就实现了一个隔行观测的效果,没错吧,哎,这就是咱们这个NTH杠的同时它可以支持这两个参数,一个叫ODD,一个叫E啊那好,那么有了它以后还有什么呢?还有一个跟它对应的,它是什么?是不是这个从上就是相当于正序下来的,对吧?那么我们还有一个倒序的叫Li冒号。冒号NTH-last,呃,如果我给他给一的话,你看background给他一个or orange,你看我给他一选择的是谁啊,来,走你。
36:04
是不是倒数第一个,哎,那么也就是说我用它的效果是不是就相当于用的谁用的是这个last child,这是不是倒数第一,这个是不是也是倒数第一对吧?哎,也就是倒叙上去的第几个对吧?那比如说我再给了一个四,那是不是倒叙上去的第四个,倒叙上去的第四个是这个是不是这个,你看1234没错吧,哎包括包括什么,这里边我也可以给他设置什么,设置英文的,比如说Li冒号NTH杠。Last control了对吧,我给他设置一个ODD,那什么意思,是不是注意啊,这是倒叙上去的D基数格吧,注意它是倒叙对不对,所以这里边BAGR给他一个什么,给他一个这个orange,它是表示的是倒叙上去了,你看周理,你看这是不是就相当于第一了,哎,倒叙上去的基数哈,135。看明白了吗?哎,所以这里边一定要记住啊,它是什么,它是倒区上去的啊。叫做倒叙上去。到第。
37:04
基数。啊,那同样有奇数个,也有什么,也有偶数个对不对,那这里边它我就不注释了下来nt Li冒号NTH杠杠杠杠last-child叫做Eve对吧,然后b background给他一个什么,给他一个这个金色吧,那现在咱们来看。周你,我倒叙上,哎哟,这两个颜色太贴近了是吧?来一个P,还是他吧。走你,你看这是我倒叙上去的偶数了,从下往上数对吧,246没错吧,哎。这就是这一一对属性啊,一个是什么正序的,一个是倒序的,那么他们两个都有一个问题,什么问题呢?他们会有一个弊端,咱们来看啊,如果我在中间破坏了它的格式,什么叫破坏了格式123到这第四个,第四个是P4LI了吗?不是吧,那如果说我在这块你看好了Li。
38:00
冒号NTH-Q的第四个Li,第四个Li,然后给他bad,然后来个红色,你看好了我的第四个Li会变红吗?不会吧,因为什么?因为第四个它不是Li,注意啊,第四个是不是了,哎,所以我要想让它变成半围,在这里面再加个五对吗?那你看好了再来走,你你看这个时候是不是才变,但是实际上这个Li是不是才是第四个Li啊。对不对,这还才是真正的第四个二吧,你看123到这时才第四个,由于中间我拿了一个别的标签给他干嘛,给他关系打乱了,所以我这个关系是不是也会乱,哎,我再盘加就加一个了,给到第四个他并选择不了。没错吧,哎,它是这样的,那同样它的NTH呢,就是倒叙的呢,咱们再来看啊,Li冒号NTH杠的,NTH-last杠的啊,它的倒叙的第四个是不是也对,你看啊倒数第。第一第二第三,到这时候还是第四,哎,那这里边来b c GR und,我还是给的红色,你看能不能变啊。
39:03
刷新这不也不行,看到了吧,哎,所以这种的如果我们再去布局,再去选择这个标签的时候,如果标签一旦中间被打断了,我们用它是不是就不好用了。对不对,诶那怎么办呢?我们可以用另外一个啊,作用跟它是一样的,唯独的区别就是什么呢?它是匹配同种类型的标签啊,那你看好了,一样Li这里面我先写注释啊,叫做。匹配同种类型的标签。作用和NTH杠的劣势。类似啊好了,那现在咱们来看它叫什么呢?叫做Li还是一样,然后NTH-off-type,哎,杠off-ta,那么一样,在这里边我比如说我给个一,那你看好了BGR,然后来个这个颜色,你看找的是不是还是第一个,没错吧,哎,那么同样这里边比如说我给他一个五,给他一个五,你看五是谁,五是不是他呀。
40:03
走,你是不是他对吧,那咱们说了,这里边如果给四呢,大家都知道四还是Li了吗?不是了,对不对,那四不是Li了,你看好了,来,走你。是不是它并没有选它吧,因为它的检测时是不是Li组,它会干嘛,自动向下面找,找到第四个Li为止,明白了,就算这里边我再加一个A标签,我来一个,哈哈。哈哈,那这个时候你来看走,你你看哈哈也会越过去对吧,然后变成这个。还是第四个始终第四个背景对吧,注意啊,这是A标签自己颜色,跟我这个背景颜色没有关系,对不对,哎,那咱把这个A给他换了吧,这样准确点,我再来个,我再来个什么呢?来个SPA标签,那SPA标签默认没有颜色吧,那OK,来刷新你看。是不是因A标签本身的颜色啊,哎,跟我这没关系啊,好了,这就是这个NTH-of type啊那么一样啊,N th of type跟child的一样,包括child里边可以使用这个oddvnth,是不是也可以,比如这里边来一个ODD。
41:04
走,你你看是不是正序下来的偶数,这个叫奇数行啊,哎,那再往下来,这个完事以后同样还跟它对应的,还有什么,有正序的就有倒序的NNTH杠,呃,Of。福利,Last of。对这个啊,那么一样,这里边比如说我给的第四个,然后B白来红色了啊,那咱们来看第四个啊,第一第二第三第四不是他,第四不是他,第四是不是他呀,哎,安妮吧,那你看安妮会不会变色来走你安妮是不是变色了,看到了吗?哎,这就是咱们这个NTH-of four-type啊好了,那再往下来还有什么呢。还有这个。再来你看好了,比如说我再来匹配一下啊,叫s e t selection selection里边包含着一个div,这是没有问题的,对吧,然后我这里边来说一句话叫做什么呢?叫做这个,呃。
42:03
叫做。世界上最没用的东西。就是工资条。工资条对吧,为什么呢?来再来一个,比如这里给个SPA啊,因为这个看着生气。擦屁股太细。拍戏好了。OK,这是一个啊,然后这里边我再来一个secret selection,然后这里边还是一个div,叫做什么呢?小胖,你牙缝里有韭菜抠出来吃了,OK,这么里这么两个标签对吧?那么接下来一样还是来选择啊,怎么选择?咱们来看我要选择谁,我选择div,看到了吗?选择div,这两个div是不是都都有,有两个div呢?那OK,你看我怎么写啊,Div冒号叫做only got child only child什么意思,是不是仅有一个,仅仅有这个对吧?Only是不是仅仅对吧?只能啊,那OK,那现在你来看好了,我在这里边。
43:11
来给它加一个叫什么B加D,然后来红色,你看这个时候谁会变红啊,来刷新。谁呀?你看小缝,你小胖,你牙缝里有酒才抠出来吃了,是不是只有这一句话才变红?看到了吗?只有这一句话才变红啊,为什么呢?因为这个负元素中确实只有一个子元素,并且这个子元素叫div,而这个负元素中是有两个子元素,其中有一个叫div。明白吧,所以我使用only child的表示什么意思啊,表示是负元素中只能有一个子元素,并且这个子元素叫什么?叫做div啊,并且它叫做div才可以啊好了,那跟它对应的肯定还有一个叫什么呢?叫做这个OS是Di啊,O ly杠,Off off type哎,匹配什么同种类型的了啊,同种类型了表示什么呀?负元素下使用同种标签的唯一一个子元素啊,就是这负元素下只有一个这个标签叫div的,就是它可以有多个儿的,但只有一个儿子是什么是div才可以,那这个时候来。
44:11
叫做什么红色,那现在你看我是不是两个都能匹配到啊,是不是这俩都能匹配到,为什么?因为这俩都符合要求吧,你看好了,在这个div,在这个select里边是不是只有两个孩子带有一个是div的,而这个selection里面是不是只有一个,是不都符合要求,都叫div吧?那如果说我在这里边再来一个secret selection,然后这里边加一个div。然后给个11111 CTRLCCTRLV,好,这两个都111啊,那现在你看好了,我这两个幺幺能匹配到,我是不是匹配不到了,为什么?因为它不符合要求,它这里面两个div了,没错吧,其中有些div哪怕我给他改成A,那它都能匹配到。看到了吗?这个一是不是也被选中了。就是咱们这就是咱们的这个only of type啊,那么再来。还有跟表单相关的,再跟表单相关,我们过再一这个,这个呢还可以有一种写法,但这种法呢,大家只作为了就行了,什么意思,就是循环样式,什么叫循环样式看好了啊,我先把这里边这两个给它注释掉了啊,让它不破坏它的顺序,是不是还是六个,哎,还是六个,现在我们先还原看好了,这里边还是六个,我的循环样式看好了,呃,比如说我这里边给他一个2N加EOK,然后BGR等于红色,我们也不知道什么意思,对吧,那么先看它的样式再说来走你。
45:34
看好了啊,从一开始对吧,然后隔一个一遍,隔一个一遍。到最后一个对吧,那OK,我改一下子,我说什么呢?我说这个3N加一。收你看好了啊一。开始二三到第四个是不是又变了,然后五六看到了吧,哎,所以这个三表示什么意思,是表示跳过的步骤,如果我给一的话,那是不是就每一个都变。
46:03
你看是不是每一个都变换颜色了,哎,给二的话是不是就隔一个对吧,你看刷新啊,你看从第一个开始一。二对吧,隔了两个吧,哎,然后第三变色,然后四是不是有两个,然后变了。对吧,你看121212,所以我这个2N表示什么意思啊,表示的这个。每次什么样?这个二相当于是每次循环中间间隔几个改变样式对不对?然后这个一呢,表示循环开始的位置,比如这会儿我给三啊2N加三,也就是从三开始,123从生俩肉七把就找开始,你看好了来走你。是不是这两个三开始这第一个变了,第二没变,第三个是不是变了,哎,中间是不是相当于间隔一个,哎,给二相当于间隔一个了啊,相隔于间一个实际上是越俩嘛,你看就是一二对吧,这就嘛,然后再一二,然后再往下,下一个是不是就该变颜色了啊,就是这个意思啊,所以它有一个循环样本,这个呢,用的非常少,大家了解就可以了啊,了解一下,我在这里给大家记下。
47:07
叫做二。N。An加B吧,An加BB这个N是固定写法啊,A呢表示什么呀?表示表示每次循环中间间隔几个。改变样式啊,然后B呢是什么呀,表示。指定在循环中开始的位置啊,这里边叫做样式,好了,这就是咱们NTH这一套系列的啊好,那接下来我们再来看几个跟表单相关的啊,那跟表单相关的我们再新建一个表单的吧,来H下面文件叫做表单相关这个选择器。啊,还有表单相关的选择器呢,那来咱们来看啊,这里边我直接还是一样的来一个form标签,然后在form里边我们来input。等于text,然后。
48:03
给他一个value吧。Value。AA,好。然后这里面再来。嗯。放到这里啊,然后再来input。呃,Test。Value,哔哔哔,好了,我就先给这两个吧,然后呢,我们这里边有一个什么呢?有这么一个东西啊,这个表单,比如说这里边我给了个disable disable什么意思不是就禁用了,对不对,然后来看好了,我来个BR。Yeah。OK,然后这里边再来打开。好了,现在有这两个表单,注意它是正常的对吧?哎,我可以改,那现在它也一样,我给他一个read宏磊一个只读一个禁用,这可以吧,对好一个只读一个禁用啊,接下来我开始来进行匹配,怎么匹配呢?看好了style标签,然后呢我input。可以这么给吧,标签对吧,然后type等于等于什么,等于test了,等于之后接下来呢,接下来我还可以下来再来设,再来设置叫什么呢?叫做en Apple。
49:08
啊,Able什么意思,就是激活的啊,我匹配激活的表单,激活表单干嘛呢?我让他的这个BA GR back格的背景颜色变成紫色,好现在你看这里边啊,注意注意,我再给他一个正常的吧。嗯,CTRLCCTRLV好了,去掉一个它OK,中间我再来个B啊。现在你来看。走,你谁被选中了?我的这个DC加上read only的只读的和我正常的是不是都被选中了?是不是只有这个未激活的,这个就是加disable了,加了disable是不是就变成未激活了?哎,所以未激活的不会被选中,看明白了吗?哎,这就是Apple的作用,干嘛呢?就只匹配表单中激活的元素啊,那再往下来能匹配激活的也能匹配什么,也能匹配未激活的,那input。
50:04
叫做。Type等于test还是这个条件对吧,然后冒号叫disable啊,表单未激活的,未激活的背景颜色我不再给你变成这个,我给你变成它变成白色看似激活的效果对吧,那现在你看我来刷新诶你看。是不是这块变成白色了,哎,我给你变变白色不好看是吧,来井号。哎呀,我也没有词儿了。随便找个颜色啊,变成这个颜色来,你看好了它的背景颜色都尼,你看是不是变了,看到了吧,哎,包括里边的字体能不能变color变成变成什么井号000黑色的。周尼,你看,这回你还能看出它未激活的效果了吗?是不是看着像激活,但实际上是未激活的吧?哎,这就是disable啊,Disable好了,那这个玩意还有一个什么呢?还有一个叫做take,它是匹配被选中的元素啊,来,你看好了,我一般被选中的,什么叫被选中啊?比如说into的ideal radio,我们做一个性别吧,这里边来个six,然后我们为就是单选对吧?那为了让他产生排斥,我的这个名称必须一样啊,女男保密。
51:10
男。保密对吧,然后这里面每一个我都给他一个标签吧,叫做LA。这里也一样,Lal。结束结束,哎。结束的来。结束了。然后这里面继续LBL。再来结束的,诶结束的来好了,那么要想让他们两个进行绑定的话,需要干嘛来呢?这里边需要给个ID,是不是ID等于一个呃,A。这里面ID。等于一个B。然后这里边再来个ID,等于一个C对吧,然后这里面需要去for是吧?For for去绑定,谁绑定这个C,这个呢,也一样for去绑定。
52:00
B。然后这个for去绑定一个A对吧,那这个时候咱们来看效果啊,来刷新看好了,我这里边女男保密,我点字是不是都可以啊,哎,没有label的时候,我就必须得点这个东西对吧?有了label现在我点文字都可以了,这就是绑定的效果对不对,那OK,那么给他绑定完标注以后,接下来你看好了我干嘛呢。我来去选择它啊,叫做。Input中括号对吧?Type TY p TY p type等于什么?等于I bio的这个这是不是单选呢?哎,当他干嘛呢,冒号。叫做c KD check check表示什么意思,表示被选中的元素,被选中的啊,你没选中的时候是不好使,是被选中以后啊,被选中以后干嘛呢,我让他的这个呃。PD红色不好使啊,我刚告诉你一声来刷新啊,你看好了刷新现在我有没有有没有被选中,没有当他这么选,他要选中对不对,哎,那我改这个,改这个按钮,改这个钮肯定不好使,改不了了,因为这钮一都摸着样子做好了,我只能改什么呢?看好了,如果他被选中以后,我让他。
53:10
不对,加紧挨着后面的library。BLGX,这是不是,你看谁被选中就让谁后面的library对吧,干嘛呢,让它的front杠,Front-size变成20像素,然后color字体颜色变成什么,变成这个紫色,那现在我们再来看走你,你看女是不是变了点,男男变点保密,你看是不是选中谁,谁的颜色开始改变了。没错吧,哎,这就是什么,这就是咱们的这个take的作用啊,Take表示什么呀?表示匹配到某个元素啊,匹配到某个元素。还有个它是匹配用户当前选中的元素什么样的啊,那比如说这里边我们来一个这个div标签吧,来个div标签,然后在这个div里我们写上一句话叫做这个嗯。
54:07
你。知道,我喜欢你。哪一点哪一点吗。哪一点嘛啊,我喜欢我喜欢你离我远一点好了,那现在咱们来看啊,我在这里边一样刷新,刷新完以后怎么就选中,是不是这么样叫选中啊,哎,那么选中以后我可以去改它的这个颜色,这个一般没什么用啊,而且它这个属性不好使,BCD,呃,错了,我改变它字体颜色吧,啊来C字体颜色变成红色,那现在你来看好了,我来刷新。周立。诶,好使了,看到了吗?好使了啊,那么一样,这个好使了,我们拿这个属性,拿这个叫什么谷歌火狐,对吧,这叫谷歌啊来走你是不是也行了,哎,现在好使了啊,这个属性有点更新,也给更新了,之前的不好使,不好使的时候需要它干嘛呢?它之前是实验性的,不好使的时候必须加入浏览器的私有前缀啊,比如说叫什么Mo moz杠啊,这个我在下节课会讲啊,Mo这杠这就什么,这就是这个火狐的,那谷歌呢,叫web k杠,Web kit web kit。
55:14
我打错了啊。Web。K啊好了,他之前是这样的啊,得加这个属性然后用才好使,对,但现在加这属性,因为它是谷针对于这个谷歌的啊,谷歌的然后再刷新啊,之前加这个实验性的属性的,因为它之前是实验属性啊,所以加实验性质的现在不需要了啊,那这里边来。给的分号啊,但我这里边啊,我给错了啊,Web k给错位置了,这么给。We k冒号这个杠select啊,前面这里面需要给元素,我不需要,不需要我就给所有的元素了,相当于啊,那这里面咱们再来刷新,你看走泥啊,那也不好使,现在啊确实不好使,你看。然后。再来。走,你看到了吧,确实不好使啊,现在不需要加这个web k了,咱们可以看一下手册,叫CSS3。
56:04
但我这是离线走势啊,那刚才我们用的叫ses,呃,不对,什么SE叫SSE。He wasle。来吧。属性。哎,不对,不是属性选择器,伪对象,最后一个你看火不是什么实验性质的,看到了吗?IE不支持这些,现在是都支持了,对吧,那实验性质的这种属性需要干嘛呢?就需要我们去给它加上这种浏览器的私有前缀,你看他怎么加的P标签冒号冒号Mo杠。看到了吗?哎,那咱们也加一下看看火红现在这里面看的是实验性的,但刚才我不加是好使的,证明已经改版了啊,证明已经改版了,那不要紧,我们可以再试一下啊,比如说这里边咱是哪个div标签是吧,那咱也规范一点来div冒号,冒号这块我们要给成什么,改成叫做MOC。杠,Selectionec OK,没有打错,这回应该可以了,来找到他。
57:00
走你一你看这回是不是可以了,哎,但是一样啊,现在那现在我不给他不加这些东西,不加这个这个浏览器是有全缀,看可不可以啊,来直接冒号,冒号来你看可不可以刷新一下。走你是不是也行啊,你看选中以后字体是不是也变变成颜色了,哎,这就是咱们被选中这个没什么大用啊,没什么大用啊。好了。然后再来还有一个,还有一个什么呢?还有一个叫做fo CU。Fo Co,有一个这个应该,嗯,Fo Co。这呢fo CS它是干嘛呢?你看设置对象在成为输入焦点是该对象是靠什么?看UN course就是获取焦点时它才会有这个这个效果啊,那OK,我们来设置一下吧,在这里边,呃,那那就那就这个input吧,就input吧,啊这input这有三个input对不对?那OK,就这三个input被Dis。啊,肯定是别别别多复制两个,那现在我们来啊,引部的冒号咱们fo fo fo没打错啊,当这个引布的标签获取到焦点时,我它干嘛呢?背景颜色变成。
58:12
这个颜色好了,现在我们再来看一眼啊,这里边。刷新好了,现在你看啊,获取焦点。这不行啊,这个。我刚才用的是什么颜色?没什么效果是吧,换一个换成这个red红色,我把上面的都注释掉了啊。获取焦点时,好了,你看背景颜色是不是变红了,看到了吧?哎,你看哪个元素这里面一样的啊,你看哪个元素会及到这哪个就背景颜色变红,你看下下下看到了吗?哎,这就代表着我们获取焦点时,我们需要干嘛去设置什么,就可以用这个来进行设置啊好了,这些就是咱们csi里边新增的所有的选择器啊,新增的所有的选区。
我来说两句