【前端21】样式的继承

LineXic

已于 2024-08-14 09:21:30 修改

阅读量310

点赞数 6

分类专栏：前端文章标签：前端 css

于 2024-08-14 09:18:41 首次发布

本文链接：https://blog.csdn.net/m0_73230319/article/details/141181220

版权

9 篇文章 0 订阅

订阅专栏

前言

本文基于尚硅谷Web前端基础教程发布，你也可以理解成这是一篇尚硅谷教程笔记，当然这里也有我的一些经验总结

在这里插入图片描述
ps:（好抽象的玩意

继承

像现实中儿子继承父亲财产一样，子标签也会继承父标签的一些相关样式[1]在web中你也可以通过定义父标签来让子标签更改样式，使我们更容易开发（如果有一天你不知道一个标签规则的作用是什么，你不妨想想没有了这个标签规则将会发生什么）

我们可以这样运用

<style>
p {
  color: red;
}
</style>

<p>我是p
<span> 我是span</span>
</p>

注意，行内元素不能套块元素

在这里插入图片描述

这是怎么回事呢，我没有给span设置样式啊，他怎么自己变成红色了？这就要归功于***继承***了：设置了父元素的样式后子元素也会跟着改变

利用继承我们可以将一些通用的样式统一设置到共同的祖先样式上，这样只设置一次即可让所有的样式都被继承

说了这么多那些样式是可以继承，那些样式不能继承呢？

1）行内和块元素等可以被继承

2）背景布局等元素不可以被继承

说起这个我也有一个坑，当时的代码是这么写的

<p> 
<span>
    点击图片查看详情
  </p>
</span>

<style>
p {
  background: gold;
}
</style>

乍一看没什么问题，p元素设置背景颜色为金色，可我忘了还有继承这一说导致最后变成了这样
在这里插入图片描述
两个标签两个范围都变成了金色，所以我改善后是这么写的

<p> 
<span>
    点击图片查看详情
  </p>
</span>

<style>
p > span{
  background: gold;
}
</style>

定义明确是p里面的span也就不存在继承这一说了，还有一个原因是继承本身不能用背景和布局，这样运用肯定会出错误，虽然当时span也出现背景了，但那个不是真的背景，只是p背景中透到span的，并不是span的继承背景

关注