machinecat520
/
zj-Exercise


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
            继承是发生在祖先和后代元素之间的
            继承的设计是为了方便开发，利用继承我们可以将一些通用的样式统一
                设置到共同的祖先原始上，这样只需设置一次即可让所有的元素都具有该样式
            
            注意：并不是所有的样式都会被继承，
                比如：背景相关的、布局相关的这些样式都不会被继承
         */

        body {
            font-size: 20px;
        }
        p {
            color: red;
            background-color: yellow;
        }
        div {
            color: yellowgreen;
        }
        
    </style>
</head>

<body>
    <p>
        这是一个p元素
        <span>这是p元素中的span</span>
    </p>
    <span>这是p元素外的span</span>
    <div>
        这是div
        <span>
            这是div中的span
            <em>这是span中的em</em>
        </span>
    </div>
</body>

</html>