css叠加原则，就近原则

<html><head lang="en">
    <meta charset="UTF-8">
    <title></title>


    <!--
      css遵循一个规律:
      1.就近原则
      2.叠加原则
    -->
    <style>
        div{
           color: purple;
           font-size: 40px;
           background-color: yellowgreen;
        }

        p{
            color: deeppink;
            font-size: 50px;
        }
    </style>

    <link href="css/index.css" rel="stylesheet">
</head>
<body>
   <div style="color: hotpink; background-color: red;">1111111111111111111</div>
   <div>22222</div>
   <div>2233333</div>
   <div>4444</div>
   <div>5555</div>
   <p>222222222222222222222222</p>
   <p>222222222222222222222222</p>
   <p>222222222222222222222222</p>
   <p>222222222222222222222222</p>

</body></html>

index.css

div{
    color: brown;
    font-size: 50px;
}

p{
    background-color: yellow;
    color: darkgreen;
    font-size: 39px;
}