如何为页面最后一个h2标签与p标签添加CSS样式？

我在HTML页面中使用了多个h2标签，希望为页面最底部的最后一个h2标签和最后一段p标签添加CSS样式。此前我尝试通过<h2.1>的方式指定特定标签来编辑CSS，但该方法无效，以下是我的HTML代码：

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Months of the Year</h1>
    <p>Did you know that the word "month" comes from the word "moon"?  That's because a month is based on how long it takes the moon to go through a full cycle.  Every year has twelve months, and each one has its own name with a special meaning.</p>
    <h2>January</h2>
    <p>January is the first month and has 31 days.  It is named after the Roman god Janus, who was the god of beginnings.  That makes a lot of sense, because that's how we begin every year.<p>
    <h2>February</h2>
    <p>February is the second month, but the first hardest to spell.  Why the extra 'r', FebRuary??  Another comfusing thing about February is that it sometimes has 28 days and sometimes 29.  It means "purification" in Latin.</p>
    <h2>March</h2>
    <p>March is named after Mars, the god of war.  That may seem random, but a long time ago, this was about the time of year when the Romans would start getting ready for war, since no one was supposed to go to war in the winter.</p>
    <h2>April</h2>
    <p>April is a mystery month, because it's not clear where the name came from.  It might be named after a goddess, but it also just might mean "opening" because spring is when all the flowers start to open up.  It used to have 29 days, but then Julius Caesar added one, so it has 30.</p>
    <h2>May</h2>
    <p>May is named after Maia, the goddess of growing plants, and lots of people think about growing flowers in May.  One fun fact about May is that it never starts on the same day or ends on the same day as any other month in a particular year.</p>
    <h2>June</h2>
    <p>June is named after Juno, the goddess of marriage.  So many people have their weddings in June.  There's also a bug called a june bug that starts crawling up from the ground around June.</p>
    <h2>July</h2>
    <p>July is named after Julius Caesar.  The Roman Senate named it after him because he was such a great general and he was born then.   Before that, it was named Quintilis, becauase it used to be the fifth month of the year.</p>
    <h2>August</h2>
    <p>August was also named after a famous general, Augustus.  He took this month because it was when he was most victorious in battle.  Before that, it was named Sextilis because it was the sixth month.</p>
    <h2>September</h2>
    <p>September is the first of the modern months that is named after numbers.  Sept means "seven" and it used to be the seventh month of the year, before January and February existed.</p>
    <h2>October</h2>
    <p>Now the month names start to get boring.  October just means 'eight', to follow after September.  One interesting fact is that there was just a space with no months where January and February used to be.</p>
    <h2>November</h2>
    <p>November means 'nine', even though it is the 11th month.  A random fact because these month names are getting boring is that the Roman week was eight days long.  There were 38 weeks in year, but that didn't include the space that later became January and February.</p>
    <h2>December</h2>
    <p>December is the last month.  It means 10.  It used to be that the Romans had ten months in every year, so I guess they were onto the metric system a long time ago, except it doesn't actually work because the moon actually has twelve cycles every year.</p>
    
    <h2> my favorite month</h2>
    
    <p> my favorite month is january, because that is when usually where i live gets the most snow, and i love the snow especially when there is three feet of snow, my favorite thing to do is jump off of trees or fences and land in the snow. most of my friends think im crazy for jumping into the snow without a jacket on. </p>
    
  </body>
</html>

解决办法 #

1. 使用CSS伪类:last-of-type #

这个选择器会匹配父元素下同类型的最后一个元素，刚好适配你的场景，直接在style.css中添加：

/* 选中body内最后一个h2标签 */
body h2:last-of-type {
  color: #ff6347;
  font-size: 1.6em;
  border-bottom: 2px dashed #ff6347;
  padding-bottom: 5px;
}

/* 选中body内最后一个p标签 */
body p:last-of-type {
  background-color: #f5f5f5;
  padding: 12px;
  border-left: 4px solid #ff6347;
}

2. 给目标元素添加class（更稳定） #

如果后续页面结构可能变化，伪类选择器可能失效，直接给最后一个h2和p加上专属class是更稳妥的方案：

修改HTML中的目标元素：

<h2 class="final-section"> my favorite month</h2>

<p class="final-paragraph"> my favorite month is january... </p>

然后在CSS中编写样式：

.final-section {
  /* 自定义样式 */
}

.final-paragraph {
  /* 自定义样式 */
}

为什么<h2.1>的写法无效？ #

HTML标签名只能是标准的元素名称（比如h2、p），不能添加点号或数字后缀，这种写法不符合HTML语法规范，自然无法被CSS识别。要指定特定元素，必须使用合法的CSS选择器或给元素添加class/id属性。

内容的提问来源于stack exchange，提问作者Robert Byram