34.尚硅谷_HTML&CSS基础_选择器的优先级.avi原创

而除了一个继承呢，我们选择器这还有一个特别重要的一个东西，来我们来看一下右键新建一个ML文件，我们来一个零九叫做一个这个选择器的一个这个优先级啊选择器的一个优先级，优先级又有什么问题，那这里边这样啊，我这来写一个什么呢？我写一个这个P标签，我是一个段落，段落这里边干嘛呢？我给这个P标签，我来什么呢？我来一个这个class class，我这写一什么呢？写一个这个P1啊P1，然后我要给他设置样式，我怎么设置，我是不是直接点点P1啊，诶点P1，然后我这来一个background一个什么呀，Color这来什么呀，来一个yellow，我这一保存，然后咱们直接运行一下，那这个点P1表示的谁，是不是就是这个PF，诶来保存CTRL1运行走，你是不是变成黄色了，诶变成黄色了，那现在再来看啊，那我这再来一什么呢，直接来一个P。

这是类选择器对吧？这是什么呀？这是元素选择器，但是现在我这两个选择器选中的实际上是不是都是同一个P元素啊，哎，那来这来一个background color来一什么呀，Red，那你要注意了，现在我这个选择器选中的都是同一个元素，而且设置的样式都是背景颜色，而且还是两个不一样的颜色，一个是黄色，一个是红色，诶那问题就来了，那你说这个背景最终它是显示黄色还是显示红色呀，黄色还是红色呢？我这个保存咱们来看啊，一刷新走你诶没变，是不是还是黄色呀？哎，还是黄色，咱们再来一个啊来我给它再写一什么呢？DD等于什么呢？等于P2我来一什么呢？来一个井号P2，井号P2我来一个background color来一什么呢？来一个yellow green，我们这个黄绿色，哎，我们来看这。

这应该是一什么效果，那现在注意了IDP2选中的是不是还这个元素啊，也就是说现在我这三个选择器选中的是什么呀？是同一个元素，而且设置背景颜色是不是颜色都不一样啊？诶那他用的是哪个颜色呢？诶我们来看走你诶是不是变绿了呀？诶变绿了诶这是什么情况呀？这是什么情况呀？来来我们来说一下他这个问题，这就涉及到了我们这个选择器的什么呀，优先级的一个问题，来说一下这个问题，当使用什么呀？使用不同的选择器，什么叫不同选择器来看P1P井号P2它是什么呀？是三个选择器吧，诶使用不同的选择器选中什么呢？选中同一个元素时，哎选中同一个元素值什么意思呀？这三个选择器它们是不同的，但是他们选中的是什么呀？是不是同一个元素啊，哎，同一个元素并且什么呢。

并且设置相同的样式是，哎，并且设置相同样式，那你们来看现在我这三个选择器是不是设置的什么呀，是不是都是背景颜色呀，哎，都是背景颜色，那我们说那这时有什么问题了，这时我们这个样式之间叫什么呀？产生了什么呀，产生了冲突，我有产生冲突呀，这儿也是背景颜色，这也是背景颜色，这也是背景颜色，是不是三个都是设的背景颜色呀，那么想假如说我这个设置字体颜色，这个设置的什么呀？背景颜色，这个是设置什么呀，字体大小，那他们还有没有冲突了，就没有冲突了，你各设各的是不就完事了呀？但是现在问题来了，他们三个设置都是同一个样式，而且发生什么呀，发生了这个样式的一个冲突，那问题来了，它到底会采用哪个样式呢？到底会采用哪样式呢？诶我们说到底最终到底采用哪个选择器什么呢？选择器定义的一个样式有什么。

那由我们这个选择器的一个什么呀？优先级干嘛呢？决定啊，由选择器的这个优先级决定，或者说叫什么呀，叫做一个选择器的一个权重啊权重说优先级，那说权重是一个意思啊，由这个东西决定，那这块什么意思呀？我们说了权重高的，优先级高的干嘛呢？诶优先级高的干嘛呢？诶优先显示，那换句话说，现在我这用几个，用了几个选择器，是不是三个选择器啊，哎，我们这P1这个类选择器，还有我们这个P元素选择器，还有我们这个P2是不是ID算算级啊，那从这三个的结果来看，谁的预算级高，是不是ID的预算级高啊，诶ID的算级高，所以这里边显示的什么呀？是不是这个yellow green啊，哎yellow green，那现在我们来看，我们来说一下这个优先级的一个规则，优先级我们分了这么几种，第一个我们叫什么呢？第一个。

优先级最高的我们叫一什么呢？叫做一个内联样式或者叫行内样式，它的什么呢？它的这个优先级，优先级是多少呢？优先级是1000啊，内联样式优先级是1000，然后往下说什么呢？我们的这个I idea选择器它的什么呢？它的优先级是多少呢？哎，是100啊，注意每一个I算器它的优先级都是什么呀，都是100，然后再往下什么呢？我们的类和尾类他们的优先级呢是。十啊，先级是十，再往下我们的什么呀？我们的这个元素选择器优先级是多少了？哎，是一啊，元素选择器优先级是一，那我们来看，那现在我们说了这是什么呀？这个是不是ID选择器啊，哎，ID选择器先级多少？优先级是100，而我们这个什么呀？元素选择剂先级多少？哎，优先级是一，上面还有一个class class多少？哎，十，那我么说了十一一百谁大呀，100的，所以是不是就优先显示我们这个yellow green了，哎，Yellow green了，那好，那看着我这来写一个style style，我这来一个background，一个color，我来什么颜色呢？来一个这个，来一个sky blue，诶来一个sky blue，我这保存是不是设置一个蓝色呀？哎，那我们说了这回优先显示谁，诶那么说ID选择器的优先级是100，但是注意了内联的优先级多少？

哎，1000是不是这个更高啊，所以这块应该是一个什么呀，一刷新是不是蓝色呀，哎，蓝色，所以注意当样式发生冲突的时候，谁的优先级高干嘛呢？是不是示谁啊，诶谁的优先级高就显示谁啊，所以这里边注意一定要记住这个规则，内联的是1000 ID的是100类和伪类的是什么呀？十元素的是什么呀？是一，诶当然还有一哥们我们的那个通配选择器。

通配是谁啊？我们那个是不是星号啊，哎星号它的优先级呢？哎，他的优先级是零，哎我们才说了零，你还说他干嘛是吧，零就已经没啥优先级了是吧？哎通背的优先级是零，所以这里边注意他的优先级干嘛呀，就比较比较低了，但是还有没有比通背还低的呀？诶我们来说一个有一个什么呢？叫做一个继承的这个样式叫什么呢？优先级，诶不用优先级了，它什么呀？没有优先级啊，通背并不是最低的，还有一个叫什么呀，继承来的样式，它没有优先级啊，没有优先级，举个例子，举个什么例子呢？那这里边我们来看，现在我这里边通过我们这个P元素，元素染测器直接来一个P，我这来什么呢？我先这样写吧，我来一个这个星号，这是我这个通配染测器啊，我来一什么呢？来一个font size放size来多少呢？来一个哎，来一个50个像素，是不是把我这个字体变成50个像素啊，来我这一刷新走，你变没变变了。

啊变了好，那现在我再来来一个什么呢？来一个这个PP轮写什么呢？写一个这个fo size方size来多少呢？来一个30个像素，那问题来了，哪个会生效？哎是30还是50，哎谁生效是不是看谁烟机高啊通配的烟级是零元素烟级多少一，所以是不是它会生效啊哎，它会生效保存我这一刷新走你字是不是小了呀，字小了啊然后注意还有一哥们呢，地位更低谁呢？诶我们就说的是继承来的样式，来在这个P这儿我们来写什么呢？写一个这个span，诶我是什么呀，我是P标签中的4SPA，好，那现在干嘛呢？我不写这个星号啊，不写型号，我已保存，现在来看效果，现在我不写这型号，我是不是只给这个P元素设置一个大小三十像素啊，来保存来看效果一刷新，你看死SPA大小多少，是不是也是30啊，诶跟这个是。

二一样的，那它SPA我有没有给他设置大小，没有span大小哪来的？哎，是不是从P元素这继承来的呀？好，那现在我把这通配给它打开，诶那我们来看，那我要看的是什么，我要看死SPA的自己大小是什么呀？是30还是50，如果是50证明谁生效了，是不是通配的生效了呀？如果是30证明什么呀？是不是继承那个生效了呀？哎，继承那个生效了，我这一保存咱们来刷新走，你完了大了吧，50那证明什么呀？是不是我那个通配符那个生效了呀，所以注意我这个星号的先级比我那个继承的先级要干嘛呀，要高啊要高，所以记住它们之间关系，内联的先级是1000I定的先级是100，类和尾类是什么呀？十元素的是什么呀？一通配的芯是优先级是零，而我们这个计承来的样式呢，它没有优先级啊，没有优先级好，但是这规则刚说完，这个简单的一个计算规则啊，那现在我们再来看看。

这么一个东西，CTRLX，我把这个背景颜色呀给它放下边来，这是一个井号一个什么呀，P2来了一什么呀，背景颜色设置一个yellow，然后呢，我把这个内联的样式我先给它去了啊去了，然后这改一个来什么呢？来一个P号P井号P2，诶我这是一个什么呀。这是一个交际选择器吧，诶交际选择器来一个background color，我这来什么呢？来一个red，诶这也是ID选择器，这也是一个ID，其实也算是ID，但是它多了一个什么呀元素，那问题就来了，这两个它会优先显示哪个，诶是红色还是这个耶古镇诶我们直接来看，其实你猜也能猜出来，这哥们明显比它要长一点是吧？诶按理说应该显示它是吧，保存一刷新走，你是不是红色呀？哎，红色，那这是为什么呀。哎，当我们这个选择器中包含什么呢？包含多种这个什么呀，选择气势需要什么呢？需要将我们这个多种选择器的怎么样，诶优先级相加，然后干嘛呢？诶然后再比较啊，然后再比较，那你像这个我们这个井号，这是itd选择器，Itd选择器计算器多少100，而这个我注意了，它我用了几个选择器，两个选择器，一个是我们这个元素选择器，元素选择器算级是一，还有一个是我们这个ID选择器，ID选择器的算级多少100 100加一得多少，哎101，那我们说了101，它大于100，所以这个会干嘛呀，会优先于它去显示，这能懂吧，诶会优先于它去显示，所以注意优先级我们说在比的时候需要干嘛呀，需要先去算，把这些所有的选择题的优先级干嘛呀加到一起去。

计算啊，加到一起计算啊，那这里边注意了，我们要说一下，但是注意，但是注意那我们想有一个问题了，诶，那我这一想，那咱们能不能实现这么一个事儿，那我来看啊，我这个类和尾类选择题的优先级是什么呢？优先级是十，而ID选择级的优先级多少啊，100，那我想我如果要使用11个类和尾类选算器，哎，我写一串一长串11个选择器，那我一想我用11个类选象器加一块，那11个是不是就变成一百一了呀？诶那一百一是不是应该比这个100要大了呀，那会不会有这个效果呀？哎，我们就不测了啊，就不测就跟你说，因为写11个也不太现实啊，写11个也不太现实，那我们是要注意什么呢？选择器的这个优先级计算不会超过它的什么呢？最大的什么呀，数来。

像机啊，不会超过最大的摄像机，比如说我现在干嘛呀，我有十个类检测机一块儿用，加来加去，它会不会加到100啊，不会最大你就使劲加吧，最大你就是多少啊，99啊，最大你到99你可能干嘛呀，不可能到100，还有如果我干嘛呀，你全都是ID选算器，你有十个ID选电器，它会不会到1000呀，不会最大也就什么了，诶999也就了不地了，当然咱们说的细点，其实也就什么呀，也就是900了啊，就900了，它不会超过什么呀，它的最大数量级啊，不会超过这个最大数量级，所以一定要注意，但是也没有那么写的啊，没有那么写的好，然后呢，我们这儿还有一个问题，还有什么问题，那有可能什么呀。我这假如说我这样吧，我想起来咱们怎么写一个这是一个P2，我这来一个什么呢？我这来一个这个P3，我这有两个class呀，一个是P1，还有一个是什么呀，P3我这来什么呢？点一个P1 p1我这来一个color color是我们这个字体的颜色，Color来什么呢？来一个这个yellow，然后呢，我再来一个点一个P3 P3我也来一个自己的颜色，Color来什么呢？来一个这个瑞，诶那现在注意了，我这个P1和P3选中的是不是都是同一个P颜色，诶，而且设置样式是不是都是颜色呀？诶那问题来了，这俩用谁是用green还是用yellow green还是yellow，我们来看效果啊，那我们先看看那是不是比优先级啊，优先级是不是都是十啊，诶优先级是一样的，诶，我们先看看效果吧，我这一刷新走你，诶哎呦，这绿色还不太好看出来是吧，但是你要注意是什么呀，是绿颜色啊，全是绿颜色。

诶的确是绿颜色，那我们来干嘛呢？为什么呀，也就是说他是不是用了这个呀，那优先级一样，为什么会用它呀，来P3和这个P1这个一样是干嘛呀，掉一个我们再看效果一刷新走你什么了，是不是黄色了，诶黄色了，那这能看懂了吗？哎我们说如果什么呀，如果选择器的选择器的这个优先级一样，择什么呀？诶择使用靠后的样式啊，谁在后边我就用谁，所以P3这两个一机一样，看看什么呀，谁在后边我就干嘛呀，我就用谁啊我就用谁，所以这边一定要注意啊，一定要注意，然后还有一种特殊情况，还有一种什么特殊情况呢？就是说我们说啊，我们这个有一个选择器叫什么呀，我们说了一个叫做一个病机选择。

病级选择器什么样啊？我这来一个div逗号一个P，来一个这个逗号，来一个井号P一来一个逗号，来一个点一个hello，这是我这个病选择器啊，诶病计算器什么特点呢？病级选择器中的这个病级选择器的优先级是什么呀？是单独计算，什么叫单独计算呀？注意了，并级选择预先级它不会干嘛呀，把div的先级加上P的先级，再加上P的先级，再加什么呀？Hello先级它会不会这么算呀？不会这么算，它会一个一个算，Div就是div p就是PPE就是什么呀，P hello就是什么呀？哈，都是独立的啊，不会说把它们都加到一起去计算啊，加到一起计算。

好，那这个呢，是我们说的一个选择器的一个优先级的问题，所以这里边我们也说了，实际上我们这里边优先级谁的优先级最高啊，哎，内联样式的优先级是最高的，所以这也是为什么我们不推荐你用内联样式的一个原因，为什么呀，你内联样式一写完了，他优先级最高，你这个样式表里你还能不能改了，哎，就改不了了，因为什么呀，因为他的优先级最高，我们这来写一个style style这来什么呢？来一个background color background color来一个这颜色呀，想不起来了，Orange orange就它吧，我一保存一刷新是不是变成这个橘红色了呀，但是看着那现在我这想改了，我在这改了，我来一个background color，我想改一什么呢？改一个这个，诶改一个green yellow，我这一保存能不能变了，哎，不能变了啊，不能变了，而且这种东西你整的时候你还不好找，这个毛病你还得去这个H面代码里去找，所以这个内联样式我们是。

不推荐的，但是注意还有一种什么呀，还有一种特殊情况，你来看啊，我在这个背景颜色这我加一个东西，诶你看我一空格出来了，一写叫什么叹号，一个叫做什么呀，Important important什么意思呀，重要的诶我们来看什么效果啊，一保存走你诶是不是绿了呀，我们发现什么了，当我给一个样式添加了一个叹号important以后，它的优先级是不是比我们这个内联样式还高啊，诶还高，所以这里边我们来说一下啊，这个是一种特殊情况，在这来说可以在我们什么呀，在我们这个样式的一个最后添加一什么呢？添加一个叹号in分子，则此时该样式干嘛呢？诶教会获得一个什么呀，获得一个最高的什么呀。

优先级啊，获得最高的优先级将会什么呢？将会优先于所有的什么呀，诶，所有的这个样式显示啊，将会优先于所有的样式显示，甚至什么呢？甚至超过我们的这个什么呀，内敛样式啊，甚至超过我们这个内联样式，所以你会发现我这儿用的是一个什么呀，是一个类选择器吧，但是我在这个样式最后加了一个important以后，我们发现什么呀，这个样式甚至于是不是优先于我们这个内联样式显示了，为什么，就是因为什么呀，这个important，注意important写哪了，写到分号是什么呀前头了，也就是说它实际上只对谁呀，只对我们当前这个背景颜色起作用啊，只对我们当前这个背景颜色起作用，那好，那看到这儿了，我们发现这important是不是挺厉害的呀，哎，挺厉害的，但是这里边我要说一句，诶，但是在我们什么呀，在开发中诶尽量避免使用我们这个什么呀。

Important啊，尽量避免使用这个important为为什么呀，其实跟我们那个style这个干嘛呀一样，这甚至还不如那个style，那么想想，当我一加上这个样式以后，它是不是变成一个非常重要的样式啊，它会优先于所有的样式显示，但是我们说了，我们开发中这个样式表是不是我们一个人写的呀，不是可能有多个人写，假如说其他人也在去改这个样式，他想干呢，他想去改变我们这个颜这个元素的一个背景颜色，他发现干嘛呀，他怎么改他也改不了，为什么呀，那就是因为有可能干嘛呀，有别人在样式表里写了一个什么呀，Important哎，非常不方便我们后期的一个维护，而且以后我们会说我们会学习什么呀，GS以后我们要通过什么呀，通过GS去修改我们样式表里的样式，但是我们发现如果你这个样式设置了input，你通过GS压根你就干嘛呀，你就改不了了啊，就改不了了，所以那啥呀，慎用啊，尽量能别用就干嘛呀，别用这什么呀，这是最后那招，最后没辙了，你说我实在。

太没辙了，不用这个就得死了，这时候你可以干嘛呀，你可以用，但是尽量能不用咱们就不用啊，能不用咱们就不用，好这是我们说的一个选择器的一个优先级啊好，咱们这一块呢，停一下。