继承和层叠

层叠是指当元素应用了多个样式规则，哪个规则优先应用。如果你曾经遇到过无法理解为什么某些CSS似乎没有应用的情况，那可能是层叠没有运用好。层叠与继承紧密相关，继承定义了子元素可以继承父元素的样式属性。它还与特异性有关，不同的选择器具有不同的特异性，当有几个选择器可以应用于一个元素时，继承可以决定应用哪个规则。

注意：为了理解所有这些内容，我建议阅读MDN CSS简介中的 层叠和继承。

如果你正在尝试将一些CSS应用于一个元素，那么你的浏览器开发者工具是开始最好的地方。看看下面的例子，我用元素选择器 h1 将 h1 标题设置为橙色。同时，我也使用类选择器设置h1 设置为紫色。由于类更具体，因此h1是紫色的。在开发者工具中，您可以看到元素选择器被划掉，因为它没有被应用。一旦你看到浏览器正在获取你的CSS（但其他东西已经推翻了它），那么你可以开始找出原因。

<div class="container">
  <h1 class="veggies">I like veggies</h1>
  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p></div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}* {box-sizing: border-box;}
p {
  margin: 0 0 1em 0;}.container {
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;}.veggies {
  color: rebeccapurple;}
h1 {
  color: orange;}