尚硅谷前端基础 (39)

好了，接下来我们来说我们的下一个，下一个呢，我们叫做一个样，选择器的一个权重，选择器的一个权重点一个N模选择器的权重在这儿我们来创建一个页面，我先给它运行起来，然后在这儿我们来说一下什么叫选择器的权重呢？看这我在这儿啊创建一个div啊创建一个div div呢，我给他来一个DD呢，我们叫BOX1啊BOX1，然后呢，我们给他一个class class呢，我们叫做一个这个叫做一个red啊，叫做一个red，那现在我写这么一个div，然后呢，在这我来给div里边写一个字吧，诶写一个字，哎，我是一个这个div。呃，然后呢，我们来给它设置样式，这个时候呢，我们写一个这个style标签，Stylele style标签，哎，我们先不看这边啊，我们先不看这边这个我给它小最小化啊，或者给它我给它打开，然后把它最小化啊，我它盖住，我们要说个什么问题呢？现在我给这div设置样式，我直接来一个点一个，我直接来一个div，然后来一个color color们来一个red，我要把什么呢？把div的这个字体颜色设置为红色，这很显然我设置完了，它这个字就变成了红色，对吧？字变成红色了，那这个时候再看啊，现在我们再来一个叫做一个点一个，诶点一个red啊点一个red，我这样吧，Div呢，我换成一个yellow，换成一个yellow啊，那这个时候div的颜色是一个黄色的啊，黄色的啊，然后再来看我下边我再来什么呢？来一个点一个red，点一个red，我给它来一个color color来一个什么呢？哎，我来一个red color叫red直接。

再来一个红色，那这时候注意了，我们来看一下，Div是一个元素选择器，选中的是这玩意儿，Div red是一个class选择器，选中的还是这玩意儿，也就是说我这两个选择器，它选中的是同一个元素啊，同一个元素，然后呢，我又都设置color，一个设置红色，一个设置黄色，那这个时候就产生了一个问题，这两个是同一个元素，而且还都是设置的字体颜色，那么到底是红的说了算还是黄的说了算，诶哪个说了算呢？哎，所以这个时候我们先说明一下这个问题，这叫什么呢？这个问题是我们这个样式的一个冲突啊，这个时候就发生了我们叫做一个样式的冲突，什么是样式冲突呢？当我们通过什么呢？哎，通过这个不同的选择器啊，通过不同的选择器选中什么呢？选中一个。

相同的元素啊，注意我们先说前提条件，选中的是相同的元素啊，通过不同的选择器，这一个是元素选择器，一个是类选择器，他们选的是不是都是这个div啊，哎，通过不同的选择器选中相同的元素，并且什么呢？并且哎为我们这个相同的样式设置什么呢？设置不同的值，哎，他们选的是同一个元素，并且设置的都是什么呢？一个样式都是color，但是说如果一个是color，一个是background color，这时候有没有问题啊，就没有问题了，就不会发生冲突了，什么时候会冲突，你设置的样式不一样的时候，一样的时候才会发生冲突，并且你这俩值不一样，这俩如果都是right是不是也没问题啊？哎，一个yellow，一个right，诶，这是一个right，这个时候就发生了一个问题啊，所以选中相同的元素，并且为相同的样式设置不同的值时，那此时此时就发生了我们这个样。

式的一个冲突啊，此时就发生样式冲突，所以在这儿我们说了一个前提啊，选择器是不同的，但是他们对应的是一个元素，也就是说我通过两种不同的方式找到了同一个元素，而且我要去修改它样式，而且修改的是同一个样式，并且改的值不一样，这个时候就发生了冲突，这个事儿很好理解，对吧？很好理解，那样式冲突发生了，这事是这么一个事儿，但是问题是样式冲突发生了，那在我这里边到底是显示的是黄色还是红色呢？到底是显示哪个颜色呢？哎，到底是显示哪个颜色呢？

那这里边由什么来决定呢？哎，发生我们这个样式冲突时，发生样式冲突时，哎，我们说应用哪个样式由什么呢？由我们这个选择器决定啊，或者再说具体一点，由我们这个选择器的一个权重决定啊，由选择器的一个权重决定，或者也可以叫选择器的一个优先级啊，你叫权重叫优先级都行，总之就是由它来决定的啊，由它来定的，所以我们先看这，我们先看这儿啊，我这一看音效效果显示什么颜色，显示的是红色，红色说明什么，说明它的优先级比它的优先级要高，哎，你说了跟位置有没有关系啊，在这儿没有关系，你把它放到上边也是它啊，跟位置现在来说是没有关系的，上下都行啊，上下都行，因为它的优先级更高，那优先级具体来说是怎么规定的，我们一块儿来说一下。

来我们来说一下啊，我们这个选择器的权重，选择器的一个权重，那这里边我们先列举一下啊，我们先列举一下选择器的一个权重，呃，那这里边我们从上到下权重最高的是谁呢？是我们的内联样式，我们先把这写上吧，内联样式啊，或者叫行内样式啊，行内内联吧，内联样式啊，叫内联叫行内都行啊，内联样式，然后呢，还有一个是我们这个ID选择器，ID选择器啊，然后什么呢？有这个类选择器啊类选择器，还有是我们这什么呢？呃，类叫类和伪类选择器，还有我们叫做一个元素选择器。

这么几个级别，那注意了，我要先说一下我们优先级是怎么表示的，以前我去给你们展示，给同学展示的时候，可能我都简写了，我直接改成了四维数字是吧，1100哎，11这么表示的，但是我现在呢，我想还是我们用一个比较标准的方式去展示这个事儿，那优先级呢，我们分成四个位置，一共，哎，一共四个位置，我们先用四个零表示吧，一共是四个位置，这四个位置可以有它对应的数字，比如说我这个数字是一是十，诶每一个位啊，它可以的数字是无限的，你这可以是100，可以是1000，可以是1万，每一位都是可以这样的，诶，那这一位是十，那它的先级就是十了，那如果第二位是十，那它优先级就会更高一些，呃，那这个是我们优先级啊，它整个分成了四位，嗯，我想一下这么说可能还不太好理解，我先还是先简化说啊，先简化说我们内联样式的优先级，我直接写内联样式的优先级是1000是1000啊，然后我们ID选择题的。

优先级是什么呢？ID选择器的优先级是100，然后类和伪类优先级是什么呢？优先级是十，诶元素选择器的优先级是一啊优先级是一，所以这个时候我们来看一下，我们优先级越高的越优先显示，一定注意，所以内联样式优先级是最高的，那我们来看这两个为什么先显示div，先显示这个，这个先显示显示红色而不显示黄色，为什么？因为。在这儿我用的是一个类选择题，类选择题算积是多少，是十，而我们元素选这用的是不是元素啊，元素的预算级是是一，而十是不是比一大呀，所以毫无疑问这肯定显示红色，那我这换一个，我这再写一个注意了，包个一是不是还有一个ID呢？哎，ID呢，所以这个时候我这直接来一个什么呢？来一个井号，叫做一个BOX1 box1我直接给它来一个color叫做orange，那这个时候注意了，我这又写了一个ID选择器，那么ID选择题的优先级是什么？诶优先级是不是100呀，那100很明显，这个时候你再显示是不是就显示orange了，诶因为。

因为它的优先级更高，所以注意显示谁有优先级决定啊，优先级决定或者这看不清楚啊，我给都改成这个什么呢？Bagu。Background color啊，都改成背背景颜色，背景颜色可能看的更明显一点。

哎，那这个时候颜色就是一个orange，看懂这意思吧，那同理，我在这儿，如果我直接写一个style标签，我来一个background color background color来什么呢？我来一个这个sky blue，哎，蓝色的天空蓝，那这个时候我们再看效果，那这个时候它是一个什么，是不是就是一个蓝色呀，哎，就是一个蓝色，是这么一个效果，为什么？因为它的优先级是一切，是不是谁高就听谁的呀，诶，谁高就是听谁的，所以这也是我们说为什么不让你用内联样式的原因之一，因为你用完内联样式以后，你在想通过样式表去改，那你可就改不了了，因为它的优先级会比较高，别的样式没有办法对它进行覆盖，所以这一块一定要注意啊，一定要注意好，我先把内联样式给它去掉，然后我们接着来说，现在我这显示的是一个橙色，看着啊，我要做手脚了，我在这儿加一个div。

等号一个BOX1，这时候我是不是换成了一个交集选择器啊？诶交集选择器你既得是div，还得有ID，叫BOX1，之前我们说了一般不推荐这么写，但是可不可以这么写，可以这么写，那这个时候我要问你了，我的背景颜色是橙色，是黄色还是红色？哎，那他肯定直接淘汰了，对吧，因为他肯定刚才就没显示，我只改了他嘛，那这个时候它的颜色就变成了黄色，就变成了黄色，为什么？哎，我们来说一下。比较我们这个优先级时，我们需要什么呢？需要将我们这个所有的选择器的优先级进行什么呢？进行相加计算啊相加计算最后我们这个优先级越高啊，优先级越高则什么呢？则越优先显示，所以注意这比的时候得把所有选择器加一块，你像它报一的预算机是ID计算器是不是100啊，哎，100，那OK，那就是100了，对吧，那我们这个。

Div box1它是什么？两个选择器，一个元素，还有一个idd是100 div是元素，元素是一，那这是不是101呀，101跟100是不是101比100大呀，所以黄色就先显示了，所以注意它是怎么算的啊，是把多个选择器进行相加，然后计算啊，然后计算来，然后注意啊，我们这儿来说一下分组选择器，分组选择器是单独计算，单独计算什么意思？分组选择器什么意思？我这写一个div，写一个逗号一个P，写一个逗号一个SPA，这是一个选择级分组啊，那这个时候注意它的优先级啊，我直接写一个color，来一个red，他的优先级是怎么算的，我来一个换一个吧，换一个yellow格，他的优先级，Div是divp是PSPA是SPA，它。

不会把这三个算一起，只会单独计算，懂这意思吧，每个逗号，因为分组嘛，一个逗号就是一组，它会单独计算，不会说把这三个合一块算啊，所以注意分组选择器是单独计算的，其他的就没有什么注意了，是吧？单独计算这块应定要知道，所以这个时候它肯定没用，对吧，肯定是还是最后是一个啊，这应该是一个background color background color，因为你color就没有冲突了，哎，它是没用的，对吧？这个yellow股也是没用的，它还是显示那个黄色啊，所以注意要计算，那有同学可能会说了，那老师诶，优先级计算。ID是100，类是十。那我如果给一个元素，我整11个类。

11个类，比如说像这个我们这个我写一个点，点第一点第二点第第第一第二第三第四，我一共写第11，我写11个类，诶比如说啊第一第二第三第四我就不写了啊，我写11个类，11个啊写11个，然后我选择去选的时候呢，我点第一点第二点第三点第四点第五，我连着写11个类选择器，那这个时候我类选择器的优先级是十，那我11个是不是就变成了一百一啊，那一百一是不是意味着它就比ID选择题高了。是不是，哎，注意不是啊，不是我们这个选择器的累加，选择器的累加它不会超过其最大的一个数量级啊，不会超过其最大的一个数量级，也就是说你的这个比如说就是什么呢？我们这个类选择器再高它也不会什么呢，也不会超过我们这个ID选择器啊，类选择器的算器再高，它也不会超过那个ID选择器，所以一定要注意优先级的计算，所以我们说标准写法不是这样的，开始我想给你们直接写，后来我一想他不太好理解对吧，所以标准写法是应该是一逗号零。

一逗号零，这逗号的意思就是把每一位给它隔开了，就是告诉你它不能干嘛不能跨。数量级啊，不能跨数量级。标准写法是这样的，哎，也就是说你你类型的你你加去了，你加半天你也只能在第二位加啊，你有一堆类选择器，你也只在第二位，你永远到不了第三位啊，同样你有一堆I级选器，你也只是在第三位加，你到不了第四位，你跨越不了那个数量级，所以标准型号是这样的啊，你们记的时候最好也按照这种方式去记，不然你那个跨数量级那块容易容易乱啊，容易乱，所以注意它不会诶超过其最大数量级啊ID你就是这这这第三位的，你十个类也不会到第三位啊，也比较好理解啊，待会自己体会一下你那你可以自己试试是吧，当然换句话，话又说回来，即使可以。

即使说我写11个class，它能超过ID，我会不会这么写，哎，也不会那么写，因为太麻烦了，没必要对吧，没必要，所以我们这里边以后再遇到你写一个样式，你发现你写那个样式没有生效，那第一个就想是不是优先级不够，被其他的样式给覆盖了，所以要先想一下这个优先级，如果你喜欢这个样式没有生效，第一个想的就是优先级够不够啊，优先级够不够，那具体来说，其实还有一些人去讲这个东西的时候，人家还有一句描述其实也挺好的，说的是什么呢？就是选择器的写的越具体。

优先级就越高啊，越具体优先级越高，但是这句话有点抽象，但是你可以稍微记一下，如果你转不过来，你就可以基本上越长优先级越高，对吧，越长原积越高，好，那这接着再来看，那其实这就会产生一个新的问题啊，我们说了如果什么呢？哎，如果这种情况，我这有一个第一第二第三第四，对吧，我把上面都注了，现在我就留一个red，留一个red，很明显背景颜色就是红色对吧？好，我这来一什么呢？来一个点一个第一，点一个第一，Background color background color，我们来一个井号，哎，对，直接来一个什么呢？来一个这个。Purple吧，紫色，那这里边注意我设置好了，这个选的是那个div，这个也是那个div，它俩都是类选择器，它俩的优先级是不是都一样？嗯，问题来了，谁生效。谁生效，我们来看效果走，是不是子的生效啊，哎，为什么它生效啊，来我把它往上调。

放到red上面。再看这生肖红的生肖，所以这儿也显而易见，呃，我们说了如果什么呢？如果优先级计算后相等，哎，俩人比半天，你这值计算完了，相同了，一样了，都是100是吧？都是100或者都是十，那此时则什么呢？则优先使用我们这个。Call。下的样式啊，优先使用我们这个靠下的样式啊，这1.1定要注意啊，这点用优先使用靠下的，也就说白了就是下边的把上边那个覆盖掉啊，下边那个上边给覆盖掉，好，这是我们说的这个东西，然后接着再补充啊，把它说完整，还有一个是我们这个通配选择题，通配选择题先级诶有同学说老师你这都已经是一了，都已经是一了，还有比他小的吗？哎，当然有了，还有四个零了，通配选择题的优先级是零啊，优先级是零，有人说老师啊，优先级是零，你就别说了，优先级是零，你还说啥呀？哎，别着急，还有一个比零更小的继承的样式干嘛呢？他没有优先级啊，没有优先级。

没有计算级，所以我们先说通配选择器，通配选择器的优先级是零，通配是谁呀？通配是不是我们这个星号啊，所以你就可以这么理解，你喜完这个星号的样式，你认谁认哪个选择器都可以把它给覆盖掉，所以我这直接写一个fo size fo size，比如说我来一个30，呃，50像素啊50像素，然后在这儿我们来看效果，字是不是就大了，诶字儿大了，然后在这儿我直接改一下，我给它来一个方size，来一个20像素，那这个时候我是不是这也设置自写了，哎，那我们说了，它的优先级是十，它的优先级是零，所以肯定是显示20像素，懂这意思吧？哎，通配选择器的优先级是一个零啊，没有优先级，那接着再来说，但是还有一个比那个通配选择器优先级还差的是谁呢？是我们继承的样式，继承的样式没有优先级，也就是说如果你的元素上同时有两个样式，一个。

是从祖先元素上继承来的，从祖先元素上继承来的样式，还有一个是通过通配选择器设置的样式，那这个时候样式听谁的？听通配显色器啊，听通配染色器，所以举个例子，在div里边我们放一个SPASPA我们来写一个，我是什么呢？我是div中的SPA div中的SPA，然后在这儿啊，我直接写一个，我直接写一个div div呢，后边我们直接来一个found size found size来一个20像素，注意啊，现在我给div设置一个20像素，字体大小给谁设置的，是不是给这div设置的？哎，字体大小是一个20像素，那么死SPA是div的后代元素，所以死SPA是不是也会继承到这个字体大小啊？哎，也会承到这个字体甲小，就是死SPA也会是二像素，但是问题是我这儿还有一个通配感应器叫星号呢，星号包括div，是不是也包括SSPA呀，哎，所以星号。

同时也给死SPA设置了一个字体大小是一个50像素，也就是说现在死SPA上有两个最大小，一个是它，还有一个是这个，那听哪个，哎听通配的，因为通配的优先有优先级，而继承没有优先级，所以你看SPA一定跟其他的字大小不一样，一定SPA会比较大一点，我们看效果你放心是弹就比较大，哎，因为它是继承的，所以它就会比较比较大这个样式啊，比较大的样式好，那这个就是我们说的它的这么一个，这么一个这个。一个问题吧，哎，一个问题好，那这里边我们就啊这我还给它设置一个背景颜色，我把这背景颜色给它去了啊，我就去了，它就背景颜色应该没有影响对吧？好，这个就是我们说的一个样式的一个优先级啊，内联样式ID选算器元素伪类啊元素选算器，哎哎，然后这个类和伪类元素显算器同配显算器，还有继能样式这块注意记一下就行了，然后。

选项是不生效的时候，相应预算级最后再说最后一个看着啊。我给他写那两样，呃，我们直接来一个style style，我们直接来一个background color background color background color，我们来一个来一个。来一个巧克力，诶巧克力的颜色，那这个时候我们这儿设置了一个内联样式，行内样式，这设置了一个这个，这设置了一个这个叫。样式表里边设置这个样式对吧？通过类型的西这有一个，这有一个，当然肯定它在后边，那我们说了内联样式预先机最高，所以你设置完了肯定就是内联，那个是不是巧克力这个颜色，哎，巧克力个颜色，那这里边我们就要看一个问题了，哎，那注意啊，我们在我们的CSS里，我可以在样式的最后，比如拿purplepo举例子，我可以在它最后我加一个叫做叹号important，叹号important这个东西，Important叫什么呀？叫重要的意思，加完这个我们先看效果，这时候看什么颜色。

变成什么了？是不是变成紫色了？哎，变成紫色了，变成这个purple了，那这import是什么意思？哎，非常简单，来在这我们来说一下，哎，我们说了，我们可以在我们这个样式的这个，哎，某一个某一个样式的这个后边添加一个什么呢？叹号important，则此时该样式会什么呢？获取到我们这个最高的优先级，优先级甚至什么呢？甚至超过我们的内联样式啊，甚至超过我们的内联样式，所以诶，我们可以用important改变先级，加上important OK，你就变成了最最最重要的一个样式，就可以获取到那个最高的一个优先级，那这个是我们说的这个important啊，Important，但是注意。

哎，注意了，哎在我们这个开发中，在开发中，哎这个玩意儿一定要什么呢？一定要慎用啊，一定要慎用，什么叫慎用？慎用的意思就是能不用尽量别用，为什么？因为一旦你加上important以后，你再想改，你可改不了了，包括你说我想用GS去改变一下页面的样式，对不起，改不了，因为有important，诶或者是改起来会很麻烦，所以这个东西不到万不得已的时候。不要用啊，不到万不得已的时候不要用，能不用咱们就尽量就不用，用完了你会发现这个事儿就很奇怪啊，很奇怪，但是你要知道这个东西啊，有一些特殊场景我们会用到一些，比如说设置图标字体的时候可能会用，但是一般情况下都不会用啊，一般情况下都不会用好，这个是我们说的一个选择器的权重，我们先说这么多，停一下。