33.尚硅谷_HTML&CSS基础_样式的继承.avi原创

那咱们是说了一堆的选择器，各种各样的选择器，什么属性啊，什么子元素啊，什么兄弟啊，什么否定啊，我否定伪类，我们说了一堆的选择器，那接下来我们来说一个，诶说一个小知识点叫一什么呢？叫做一个零巴，我们叫做一个这个哎，样式的一个这个继承啊，样式的一个继承，那我们来说一下，那先说什么叫继承啊，什么叫继承啊，诶那我们说了这个，我们都说这个后代是不是可以去继承我们这个，诶祖先或者说儿子可以去继承这个父亲的一个什么呀遗产，对吧？或者说我们这个后代可以继承我们这个祖先的一个遗产，对吧？诶那像什么呢？继承实际上就跟这个什么东西是一样的，像什么呀？像我们这个，诶，儿子举个例子啊，儿子可以什么呢？可以继承我们这个，哎，父亲的这个遗产。一样啊，跟这个一样，在什么呢？也不是这个像啊，是那个，哎，这个像啊，像儿子可以继承父亲的遗产一样，在什么呢？在我们的这个，诶CSS中什么呢？诶我们这个祖先元素上的这个样式也会什么呢？也会被谁呢？被它的这个后代元素所继承啊，祖先元素上的样式也会被它的后代元素所继承，那什么意思，我们来看一下，这里边我直接写一个什么呢？写一个这个P标签，P标签我这来写一个字啊，我是这个P标签中的这个文字，然后在P标签里边我写一什么呢？写一个SPA，这写一个我是SPA中的这个什么呀文字，现在我有一个P标签，有一个SPA，然后在这儿在这儿写吧，在外边再写一个SPA，我是什么呀，诶P标签。

外边的SPAP元素吧，哎，P元素Y的这个SPA，那现在我们来看，我有两个SPA，那我们说这个死SPA和这个P元素他们什么关系，哎，是不是父子关系啊，哎，是父子关系，那我们说了，现在来看运行一下CTRL运行。

现在他们的字体大小是不是都是一样的呀？哎，都是一样的，那现在干嘛呢？来看这我给P元素设置一个样式，来一什么呢？Style style，我这来一个，咱们来一个font size是不是自己大小啊，来什么呢？来一个30PS那你注意了，我这个样式我设置给谁了。是不是设置P元素了，我有没有给死SPA设置啊？诶保存我们来看，一刷新走，你发什么效果？诶是不是死SPA这中的字也变大了呀，而且注意这个死SPA变大了，而这干嘛呀，没变为什么呀？因为这个死SPA是这个P的什么呀？哎子元素，而这个他俩干嘛呀，他俩是不是兄弟啊，哎不会被兄弟继承，所以这里边注意当我给这个P元素设置方size的时候干嘛了？是不是就相当于我也给谁呀，是不是也给死SPA设置了呀？哎给死SPA设置这叫什么呀？继承啊继承给素设置完之后呢，给这个死SPA干嘛了，也同时设上这个大小了啊，这叫做一个样式的一个继承，这个能看明白吧？诶那我们说这个继承它它好不好啊好不好？诶，那我们说如果没有继承，我们想想这个事儿其实会很麻烦，怎么麻烦呢？如果没有继承，也就意味着我给P设置完这个字体大小以后，对死SPA。

会不会有用，不会有用，那就也就意味着什么呀，我们这个P的字可能干嘛呀变大了，但是SPA里边字干嘛呀，是不是还是那么小啊，那你就会发现我同样一段文字里边大大小小的文字，它大小是不是就不统一了呀？诶所以有了一个继承以后干嘛呢？它对我们这个什么呀，诶对我们的这个开发是一个什么呀，简化，我不用再去分别设置，只需要干嘛呀，只需要给我们的这个什么呀，祖先元素设置样式，这些后代元素是不是自然而然就有了呀，那同理，现在我是给P元素设置的，我这块不给P元素设置，我给什么呢？我给div来设置。

然后它干嘛呢？哎，我把这个P元素啊放在div里，那我问你对这个P还有这个SPA有没有用，是不是也有用啊，哎，一刷新是不是也有用啊，哎，所以这里边注意我们可以干嘛呢？诶利用我们这个继承，诶利用继承可以什么呢？可以将一些什么呀？诶将一些基本的样式设置给谁呢？设置给我们的这什么呀？副元素，诶不不一定是负元素，可能什么呀？组先元素啊设置给组先元素这样什么呢？这样所有的这个后代元素将会干嘛呀，将会自动继承干嘛呀，这些样式，也就是说我只需要设置一个，是不是所有都有了呀？诶那假设现在干嘛呢？我不想，我不想给div设置，我想干嘛呢？我想页面中所有的字体大小都是30个像素，那我这怎么办？哎，我是不是直接给body设置啊，直接来一个style来一什么呀，Body我们这个元素选择器，然后来一个fo，诶来一个这个什么呀，Fo set来一个三。

十个像素一保存慢慢来，一刷新走，你是不是就都变了呀？哎，这都变了啊，所以注意我们可以干嘛呀，把这些样式统统的设置他们的祖先像素，这样它的所有后代都会应用上这个样式啊，都会应用上这样式，这是我们说样式的一个继承，但是我们要说一个问题，说什么问题呢？诶那我们说就跟什么呀，就跟我们现实生活里边其实是一模一样的，所以你们学什么东西的时候，千万不要脱离现实，这东西也是什么呀，也是人发明的，他也是跟我们现实生活中类似的，我们说了是不是说这个父亲的所有财产，这个儿子都可以继承啊，比如说这父亲干嘛呀，父亲有一个这个糖尿病儿子会不会继承啊，这这不一定是吧，哎，这不一定有可能，但是不一定是吧，哎，不一定，也就是说并不是所有的遗产都会被这个儿子继承，同样，诶，并不是什么呢，并不是所有，但是啊，并不是所有的这个样式。

都会被谁呢？被我们这个子元素所继承啊，并不是所有的样式都会被子元素所继承，比如说举个例子，比如我们的什么呀，比如我们的这个背景颜色，诶就不会被什么呀继承啊，不是背景颜色，所有这种什么呀，背景相关的样式都不会被继承啊，背景相关样式都不会被继承，什么意思呀？来我们给div设置一个背景颜色，直接来一个back，诶来一个什么呀，Style style来一个background color background color来一什么呢？来一个这个yellow，我这一保存，我是不是给他设置一个背景颜色呀，那么说了，背景颜色会不会被被继承，不会，那也就意味着我这个背景颜色不会设置给P，还有谁呀，是不是还有败啊，哎，还有败，来我这一保存，咱们来看效果，一刷新走你留。

还有什么了？P还有SPA它是不是也黄了呀？哎，那我们说了，难道说我们这个背景颜色可以被继承吗？一定注意背景相关的全都不能继承，诶，那为什么这儿也会体现出一个黄色呢？来诶，我们来看看什么呀，看看文档啊，打开我们这个W3死故离线手册，我们这块就该看我们这个CSS，来点开CSS往下找有一个CSS参考手册，我们直接找我们这个背景相关的，往下一找是background color跟这呢吧，来点开我们这个background color，首先往下看每一这个都什么呀？这些都是我们这个CSS里边什么呀，具体的一个样式，通过它可以查询到我们这个样式到底要怎么用，那我们来看这个background color，往下找每个样式都会有这么一个表，来看它会有一栏叫什么呀，继承性，继承性写了一什么呀。

No no表示什么意思？哎，不继承，那比如说刚才我们设置那个叫什么呀，叫做found size1打开我们来看继承性写的什么呀，Yes，诶可以继承啊，可以继承，而我们这个battle让看着干嘛呀，它不能继承，诶那问题就来了，他不能继承，可是我看到他明显是不是也黄了呀，那什么原因呀？诶那我们就要看一下什么呢？看一下我们这个背景颜色的默认值是什么，我们来看这儿还有一个默认值叫什么，叫做trans。Parent，诶，什么叫transparent呀？叫什么呀，透明的啊，Transparent叫透明的，那换一句话说，实际上我们这个P元素和这个SPA它有没有背景颜色，没有，它的背景颜色是什么呀？透明的，而它这个负元素是谁呀？诶，Div，那等于是什么呀？Div的背景颜色他们干嘛了？是不是透过来了？哎，透过了，所以注意背景相关的样式，它是干嘛呀，不会被继承的，诶那我们想想它这东西为什么要这么设计？

为什么要这么设计？那透明你都这东西也继承它不好吗？咱们先说继承行不行啊？如果你是纯颜色的背景继承一点问题也没有，如果你都是纯颜色，一点问题没有，就怕你是用什么呀背景图片，那么想想，如果你这个背景用的是一个背景图片，那背景图片可能后边画的是什么呀，是个小人。小人对吧？哎，是个小人，那现在问题来了，那你这上面是不是还有这个子元素啊，哎，那如果子元素他会继承这个背景，那什么情况，他这是不是还又套一小人啊，哎，然后你这还有子元素，这干嘛呀，这又套一小人吧？哎，然后这有一个紫然路，这这这这小人是方脸了，圆脸，诶那我这是不是还套一小人啊，你会发现这样的话会导致我这个背景是不是特别的乱呀，于是干嘛呀，我让背景干脆都是什么呀，都是透明的，使我们这个复元素的子元，复元素的背景可以通过这个子元素是不是透出来，哎，透出来啊，所以注意背景相关的都不会被继承，包括还有什么呀，边框啊，什么定位啊等等这一系列，它是都不会被继承的，但是这些样式我们以后再去说，那你就注意看这个样式会不会被继承，直接看什么，它这个每一个选项里都有一个表，它会有一个什么呀，继承性写的是一个no，就表示它不会被继承啊，不会被继承。

好，这是我们说的这个样式啊，比如背景相关的样式还有什么呀，还有我们这个哎边框相关的哎样式还有什么呀，我们这些定位哎相关的哎都不会被继承啊，都不会被继承，但是现在后边的我们用的时候再说啊，用时再说，现在先有一个了解，好这里边我们来停一下。