html - 全新的 CSS，无法弄清楚如何为我的每个 html 段落正确编码不同的类/属性值

Question

我目前正在学习如何使用类选择器，并且知道一旦我为我的 html 中的特定段落分配了一个类，我的下一步应该是在我的 CSS 中为这些类创建新规则。我正在关注 Head First HTML CSS 指南，他们没有为此指定明确的路径。任务是为每个段落分配不同的颜色。虽然第一个 (p class="greentea")只有一个段落显示了所需的颜色，但 p.greentea {color: green;} 确实有效，其余的则没有。有人可以校对代码并让我知道我做错了什么吗？谢谢你。

HTML

p.greentea {
  color: green;
} 
p.raspberry {
  color: blue;
} 
p.blueberry {
  color: purple;
} 
p.cranberry {
  color: red;
}

<p class="greentea">
  <img src="../images/green.jpg">
  Chock full of vitamins and minerals, this elixir
  combines the healthful benefits of green tea with
  a twist of chamomile blossoms and ginger root.
</p>
<h2>Raspberry Ice Concentration</h2>
<p class="raspberry">
  <img src="../images/lightblue.jpg">
  Combining raspberry juice with lemon grass,
  citrus peel and rosehips, this icy drink
  will make your mind feel clear and crisp.
</p>
<h2>Blueberry Bliss Elixir</h2>
<p class="blueberry">
  <img src="../images/blue.jpg">
  Blueberries and cherry essence mixed into a base
  of elderflower herb tea will put you in a relaxed
  state of bliss in no time.
</p>
<h2>Cranberry Antioxidant Blast</h2>
<p class="cranberry">
  <img src="../images/red.jpg">
  Wake up to the flavors of cranberry and hibiscus
  in this vitamin C rich elixir.
</p>

标签： htmlcss