尚硅谷前端基础 (38)

好，介绍完了我们的这些伪元素啊，或者说介绍完了我们这些选择器，比如说选择器我们整个都过了一遍了，那接下来呢，本应该我们要进入到我们的这种样式的具体样式的一个学习了，但是呢，我们现在呢，先。在讲样之前呢，我们还是要先补充一些基础的知识，那我们这里边要说的第一个知识叫做继承，哎，我们叫做一个样式的继承，样式的继承，那什么叫做继承呢？啊，我们来说一下啊继承，那么继承其实我们都知道，在我们现实生活中对吧，现实生活中我们。知道这个继承的情况，哎，比如说哎，一个很有钱的这个这个祖先是吧，哎父亲很有钱，或者爷爷很有钱，那么这个祖先的财产可以被这个子女啊，或者说是后代所继承是吧，我们所谓的什么富二代，富三代对吧，就是可以继承到我们这个，呃，祖先一个财产，这是我们现实生活中的，那在我们的这个网页开发中，在我们的CSS里，实际上也会有继承这件事儿，什么时候会发生继承呢？我举一个例子啊，我这写一个P标签，P标签我是一个P元素，我是一个P元素，然后在P标签里边放一个死SPA啊，注意啊，P元素里边不能放块元素，之前强调过了，我再再强调一遍，P元素里面你可以放行列元素，但是你在P元素里边不能放任何的矿元素，好SPA，这我起一个写个字吧，就是我是P元素，诶P元素中的这个。

SPA啊SPA大概这样一个结构，我们直接给它运行一下。哎，运行完了就是这样一个啊，这整个是一个P元素，对吧？整个是一个P元素，然后呢，这个是我们P元素中的死败，那什么叫继承呢？来我们写一个样式，我们直接看效果啊，现在呢，我给这个P元素来设置一个颜色，哎，比如说我给P元素设置一个Co啊，叫做一个color color我直接写一个red啊，直接写一个red，我把P元素的里面的字设置成红色，注意了，我这个选择器叫什么叫P元素，也就是说我是给P元素去设置的，我有没有选择死SPA，哎，没有选择死SPA，但是你会发现什么呢？诶，我的这个死SPA，这个时候它是不是也变成红颜色了，诶我给P元素设置了，结果死SPA也变红了，那这是为什么？哎，这个就是我们所谓的叫做一个样式的继承，我们直接来说啊，样式的一个继承，什么叫样式的继承，很简单，就是我们。

嗯，为什么呢？哎，我们为一个元素设置的一个样式，哎，为什么呢？哎，同时诶也会诶被它的后代元素，诶也会什么呢？也会应用到它的什么呢？它的后代元素上啊，也会应用到后代元素上，那这个特点我们叫一个继承，那现在这个样式我们是给谁设置的，给P设置的，但是同时我们的SSPA是不是也应用上的这个样式啊，这就叫继承，为什么SSPA会有，为什么这个SSPA会有，因为这个SSPA是P的一个后代元素啊，注意不一定非得是祖先元素，后代元只要是在B里边就行，所以这里边我们再看一个，我这直接写一个这个。

写的div啊，我这先写这么一个SPA，我是P元素Y的SPA元素，你看这个SPA有没有，这个SPA是不是就没有，为什么？因为它不是P元素的后代，所以它不会得到这个样式的一个继承，继承只会发生在这个后代元素身上啊，一定要注意啊，继承只会发生在这个后代元素身上，好，这里是我们说的一个这个这个继承啊，继承，那这里边我们再演示一个，我这写一个div div里边呢，我们写一个这个这我是div。

我是div，然后在div里边我们再写一个这个死弹啊死弹我是什么呢？我是div，诶中的这个SPA，诶中的SPA，那这时候我们来给div设置一个样式，那这里边啊，我们还是设置一个自己颜色，我们直接来一个div div后边我来一个color，我们来一个yellow，你就会发现什么呢？你发现SPA也同时变成黄色了，同时我在SPA里我再套一个啊，SPA是行天元素，我可以再套一个行内，比如说放一个em，我是SPA中的这个em，这时候你会发现这个em比黄色不太好看啊，来一个yellow green润，你会发现什么呢？这个em是不是也变绿了？诶，它不是div的紫元素，它是什么？但是它也会变绿，为什么？因为它是div的后代，只要在div里边都会继承到这个样式，无论你是子元素还是后代，所以注意继承是发生在哪儿的继承。

是发生在诶是发生在我们这个祖先和这个后代之间的啊，是发生在我们这个祖先元素和后代元素之间的，这1.1定要注意啊，一定要注意好，那接着往下我们再说，那我想提一个问题，那这继承它是好还是不好？诶继承有没有好处，哎，那我们来说一下，继承实际上是什么呢？继承的这个设计是为了是为了方便什么呢？方便我们的一个开发，我们说了利用继承，你像你想一下，如果没有继承，如果没有继承的话，那会是一个什么样的效果，所以我们学一个东西，首先你要建立这个这个概念，这个东西如果是默认就有的，如果是默认就有的，一般情况下它是对我们有利的，不会说这东西默认就存在，它是给我们捣乱的，很少，一般是默认有的，一定是对我们有利的，所以继承它是默认有的，所以继承一定对我们开发是有利的，这是1.2，一个你要想的好处，你就要反着想，你先想一想，如果没有他我会是什么样是吧，所以你当你，哎，你觉得有一个人比较比较讨厌，哎，你觉得比较烦他是吧，或者一个事儿你比较烦，你反着想，你想什么呢。

诶，如果没有这个人，如果没有这个事儿，我会怎么样，那你要考虑一下，诶这东西到底是好的还是不好的，对吧？逆向思维吗？那同理，我们想一下继承到底好不好，我们就先假设没有继承，假设如果没有继承的话，我给P元素设置的样式和我给div设置的样式，那这个时候是不是只有P元素本身还有div本身会有这个样式，哎，那这个时候他们里边的死SPA，哎，像这个死SPA，像这个em，那像这个是不是应该都是原本的黑色。

它不会应用上这个样式，但是我们想一下，一般情况下来讲，我们同一个元素那个文字样样式是不是一般都一样的呀，不一样的我们可以单独设置，但是默认情况下我们是不是应该都是都是一样的呀，那如果不一样的话，而我们又希望一样，那像这种情况我们就比较麻烦，我先得给div设置，然后给SPA设置，然后给em设置，虽然我们可以用选择器分组，但是这样设置起来是不是也会比较的比较的麻烦呀，诶比较麻烦，所以有了继承以后是干嘛呢？诶利用继承我们可以什么呢？诶我们可以将一些诶通用的样式统一设置到我们这什么呢？哎，到这个什么呀，哎到这个共同的这个祖先元素上，诶这样什么呢？这样我们只需设置一次啊，设置一次即可，什么呢？即可，哎，让我们这个所有的元素，哎，所有元素都具有。

该样式啊，所有元素都具有该样式，这个就是我们的继承，我只需要写一次，我只需要写一次即可让所有元素都获取到这个样式，那这样是我们来说是不是等于是简化了一个开发，诶，所以继承是省事的啊，继承是方便我们去开发的，好，那这个就是我们说继承，那继承其实我们最常见的，可能有时候我网页里边有一些通用的样式，可能我会干嘛呢？我会统一设置给body，比如说我设置一个photo size，我直接来什么呢？来12像素，那这样的好处就是你看我所有的字是不是都小了，诶，所有的都小了，我设置完这个12个像素以后，我让我的所有字己都统一到了12像素，也就是说我只给body一个设置，它下边的P也好，SP也好，Div也好，都会应用上这个样式，为什么？因为body是他们共同的祖先元素啊，共同的祖先元素好，那这个是我们说的一个继承，但是这里边我们要补充一个问题啊，所以你要知道继承。

都是好的啊，继承这个东西什么时候发生，就是后代元素会继承祖先元素的一个样式，那接着往下我们再来说那继承。是不是所有的样式都会继承？哎，和我们现实生活中一样，对吧？我们可以继承祖先的财产，但并不是祖先的所有东西都会继承，比如说你祖先长一个瘤子是吧，长一哎某人祖先长哪哪哪长一瘤子，这瘤子你会不会继承啊？哎，你要这瘤子你不会继承的是吧？再说别的，你祖先是吧？有老祖，老祖宗有有有有十个媳妇儿，这十个媳妇儿会不会被他的后代继承啊？哎，那大部分情况下都不会继承对吧？当然可能一些少数民族，可是一些奇奇怪的国外的可能有这种情况是吧？但是大部分情况下都不会继承，所以并不是所有的财产都会被继承，那同理，在我们的CSS里面，是不是所有样式都会被继承的？哎，也并不是这样的，所以这个时候注意我们说一下，但是注意哎注意哎，并不是所有的样式都会被继承，诶比如什么呢？诶比如我们这个背景相关的，诶比如什么呢？比如我们这个布局。

与相关的啊，布局相关的这些东西，这些样式都不会被继承啊，都不会被继承，我这只能说一个等啊，比较常见的就是背景相关的，不相关的，哎，但是可能还有一些其他的，我问可能概括的不全，所以大部分这些东西都不会被继承，其实不被继承的还还挺多呢，哎，还挺多呢，背景相关的像什么呢？哎，比如说我给这个P标签，我设置一个background color background color，我来一个orange啊，Background背景color颜色设置个背景颜色，我们直接来一个orange啊orange我给它设置一个这个，诶橙色的一个这个背景，那这个时候背景时候变成这个orange了，诶orange了，那这个时候这个背景就没有被SPA所继承，诶我同说。

老师，你这是瞪眼说瞎话呀。SPA这不也变成这个橙色了吗？你怎么能说没继承的，哎，注意了，我们要说一下有没有继承，肯定一点没有继承，没有继承，绝对没有继承，那为什么变成橙色了？诶，因为如果他没有继承这个颜色的话，那子SPA的背景颜色是不是应该是那个默认的背景颜色呀，而默认的背景颜色是什么呢？默认的背景颜色叫做transparent，叫做默认的背景颜色叫做透明，所以span的背景颜色是透明效果，透明效果那它的复元素是一个橙色，那等于复元素的个背景是不是从紫元素那个透明里边就就透出来了，哎，就透出来了，所以这个时候它并不是继承的，而是那个背景从子元素上边透过来了，所以这个并不是继承啊，一定要注意，所以背景相关的不会被继承，为什么？其实你要想一下，这东西设计的也比较合理，为什么不会被继承呢？因为我们背景除了背景颜色以外，还有背景图片。

假如说背景是可以继承的啊，还是那句话，你要想这个事儿，你就反着想，假如说背景是可以继承的，那么我假如说我的背景不是颜色，是一个图片颜色还好说是纯的。如果是图片这个背景呢，是一个什么呢？是一个笑脸。是一个笑脸是吧，是这么一个东西，那这个时候背景图片如果会继承，你注意了，我这里边是不是可能有子元素，哎，那子元素继承了，那子元素里边也是一个小点。哎，这还有子元素，这里边干嘛呢？又是一个笑脸，那这时候你想一下，我这页面里有几个子元素，就记成几个背景，那我这里边是不是变成一堆小笑脸了啊，一堆小笑脸，所以这玩意儿就不能继承，继承完了就就不好看了，对吧，就不好看了，所以它这些设计都是符合我们这个就是比较合理的啊，都是比较合理的，他不会说去瞎设计，那这里边其实你就会有疑问，哎呀，老师你是说完了这个东西谁会继承，谁不会继承，我怎么看呀？哎，其实这一点也不用着急，我们随时讲，随时还要说，但是我们还是要说一下，这东西你要查，你要去哪查。

去哪查呢？直接打开你的这个Z，我们的手册，找到我们的这个CSSCSS，我们这有一个直接看这个keywords index，这里边都是我们这个样式一个表，你可以查怎么查，比如说我就直接搜吧，我想看背景颜色会不会继承，我直接搜一下BA glu background color，在这直接点开，这是背景颜色的一个使用方式啊，哎，这表里边写的很全，你直接上这搜就完事了啊，然后往下找每一个每一个样式，它都会有一个表格在这儿，在这儿看到了吧，一个表格，你看in initial show的一个value，就是一个它的一个初始值啊，初始值叫做transparent啊，Transparent透明的意思，也就是说默认值，它是一个透明的，这是它的默认值啊，Transparent，然后这还有一个inherit inherited，叫做继承，是否继承？继承性写了什么呢？No，也就是说。

这个东西是不会继承的，看到了吧，诶，他写了一个no是不会继承的，所以你要想研究一下这东西会不会继承，直接找一下什么呢？哎，找一下我们的这个。文档里面这个表，这个表其实挺全的是吧，初始值是否会继承，然后什么这个叫什么呀？啊，Less to，就是能用在哪个元素上，你看所有元素，诶，而且还能用在什么呢？First letter，还有first line这些伪元素上，对吧，都会给你解释，那比如说能继承的我们用谁呢？我们叫做一个found size是可以继承的，我们直接看我们这个found size，还是看这个表格，直接看它这个inherited inherited yes是不是继承性就是可以，哎，可以，所以这个时候直接看一下这个表就OK了啊，一看这个yes还是no就知道是否是继承了。好，这个是我们说的一个纯理论知识继承这么一件事，我们先来评一下。