1.声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3.在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.
nth-child()括号里面的顺序号是指“兄弟姐妹”之间的序号，并不是整个家族不分辈分的序号。在你的代码中，第一个div和第二个div是兄弟关系，它们的序号是1和2，所以它们分别获得了第1个和第2个样式，而3-1和3-2这两个div则是前两个div的“侄子”（它们外面所套的那个div则是它们的“父亲”），所以它们的序号会重新分配为1和2，并分别匹配第1和第2个样式。听懂没有？
改成这样就行：
<style>body>div:nth-child(1) {background:#78caf1 /*蓝*/}
body>div:nth-child(2) {background:#ffc04c /*橙*/}
div>div:nth-child(1) {background:#33bf51 /*绿*/}
</style>
