Blogger平台多篇文章中能否重复使用相同取值的id属性？

结论 #

重复使用相同ID的做法不符合HTML规范，完全不推荐使用。

原因说明 #

• HTML标准明确规定：同一DOM页面内的ID属性必须唯一。如果你的博客存在多文章聚合展示的列表页，同一页面会同时出现多个id="myPost"的元素，直接违反规范。
• 你现在看到ID样式生效属于浏览器的容错兼容逻辑，不属于标准约定的行为，后续浏览器版本迭代可能失效，导致全站样式异常。
• 若后续需要新增JS交互逻辑，document.getElementById()只能匹配到页面内第一个对应ID的元素，其余元素的交互会全部失效。
• 无障碍读屏工具等辅助设备依赖ID的唯一性做内容识别，重复ID会导致视障用户无法正常访问你的内容。

适配你场景的替代方案（无需修改6000篇已有文章） #

你之前用class样式不生效的核心原因是CSS优先级低于Bootstrap的原生样式，只要提升自定义样式的优先级即可，推荐两种实现方式：

1. 叠加选择器提升优先级
   你可以结合博客文章外层的固定容器类（比如Blogger默认的.post-body）叠加选择器，优先级会远高于Bootstrap的原生样式：

.post-body .panel-heading {
  background-color: red !important;
}

如果找不到外层容器类，直接加!important也可以满足全局覆盖的需求：

.panel-heading {
  background-color: red !important;
}

2. 保留现有ID写法的临时兼容方案（仅作过渡，不推荐长期使用）
   如果暂时没有时间调整全部文章的属性，你可以把ID选择器改成属性选择器写法，符合规范的同时也能匹配所有对应元素：

div[id="myPost"] {
  background-color: red;
}

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