<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
样式的继承:我们为一个元素设置的样式,也会应用到它的后代元素
继承是发生在祖先元素和后代元素之间的
继承的设计是为了方便开发,利用继承我们可以将一些通用的样式统一设置到后代元素上,这样只需设置一次,即可让所有元素都具有该样式
注意:并不是所有的样式都会被继承,比如 背景相关的、布局相关的 等这些样式都不会被继承
如何知道一个样式会不会被继承
- 直接去Zeal左上角搜索框搜索该标签,找inherited属性
*/
/* body{
font-size: 12px;
} */
p{
color:red;
background-color: orange;
}
div{
color:yellowgreen;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素中的span</span>
</p>
<span>
我是p元素外的span
</span>
<div>
我是div
<span>我是div中的span</span>
<em>我是span中的em</em>
</div>
</body>
</html>