无需添加div等元素 仅用CSS能否为不同footer设置差异化样式

实现方案 #

完全可以仅通过CSS实现差异化样式，无需修改HTML代码或新增额外元素，使用CSS结构伪类选择器即可完成匹配：

方案1：nth-of-type 选择器（主流浏览器兼容） #

通过序号直接匹配对应位置的footer元素：

/* 匹配第1、2个footer，设置署名样式 */
footer:nth-of-type(1),
footer:nth-of-type(2) {
  font-size: 0.9rem;
  font-style: italic;
  color: #666;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

/* 匹配最后1个footer，设置正式页脚样式 */
footer:last-of-type {
  background-color: #1f2937;
  color: #f9fafb;
  padding: 24px;
  text-align: center;
}

方案2：相邻兄弟选择器（兼容老旧浏览器） #

如果课程要求兼容极低版本浏览器（如IE7及以上），可以用更基础的相邻兄弟写法：

/* 第一个footer默认用署名样式 */
footer {
  font-size: 0.9rem;
  font-style: italic;
  color: #666;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

/* 第二个footer沿用署名样式 */
footer + footer {
  /* 可按需调整署名样式差异，无差异可以不写额外属性 */
}

/* 第三个footer优先级更高，覆盖为页脚样式 */
footer + footer + footer {
  background-color: #1f2937;
  color: #f9fafb;
  padding: 24px;
  text-align: center;
  border: none;
  font-style: normal;
}

两种方案都可以完美实现需求，不需要改动任何原有HTML内容。

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