仅用于样式且忽略验证时，重复使用ID会有HTML&CSS问题吗？

首先直接给你个结论：短期内只用来写CSS样式、完全不碰JS和锚点，且不在意验证的话，大概率不会立刻出明显bug，但从长期维护和隐性风险来看，这绝对是个不值得踩的坑。结合你用老旧CMS的场景，我给你拆解下具体的问题：

1. CSS样式维护会越来越混乱 #

ID的优先级远高于class（!important除外），重复ID的话，你现在写的样式会应用到所有带这个ID的元素上——这看起来是你想要的效果，但麻烦在后续：

• 如果你想给其中某一个元素单独改样式，你只能写更复杂的嵌套选择器（比如.parent #target）来提高优先级，时间长了CSS会变得臃肿不堪；
• 万一后续有人在样式表后面又加了一段同ID的样式，所有带这个ID的元素都会被覆盖，很容易出现莫名其妙的样式bug，排查起来要翻遍整个样式表。

2. 浏览器隐性的行为差异 #

虽然现在主流浏览器（Chrome、Firefox、Edge）对重复ID的CSS处理比较宽容，基本都会把样式应用到所有匹配的元素上，但内网环境往往存在旧版本浏览器（比如某些还在苟延残喘的IE），这些旧浏览器可能会出现“只给第一个带该ID的元素应用样式”的bug，到时候排查兼容性问题会让你头大。

3. 未来的扩展性完全锁死 #

你现在说不用JS，但谁能保证以后不会加交互？比如要给某个元素加个点击事件，用document.getElementById()只会返回DOM中第一个匹配的元素，其他带相同ID的元素完全没法通过这个方法获取；哪怕用querySelector，写#target也只会拿到第一个元素，后续要改JS代码的话，要么全换成类选择器，要么逐个改ID，工作量直接翻倍。

而且万一以后公司要求页面符合W3C验证（比如合规检查），重复ID会直接导致验证失败，整改起来要改所有重复的ID，想想都崩溃。

针对你的CMS限制，给个变通方案 #

既然只能加ID不能加class，那可以用「前缀+唯一标识」的方式给元素加ID，比如#card-1、#card-2、#card-3，然后用CSS属性选择器批量设置样式：

[id^="card-"] {
  /* 所有以card-开头的ID元素共享的样式 */
  padding: 16px;
  border: 1px solid #eee;
}

这样既符合ID唯一的标准，又能实现批量样式的需求，完美避开重复ID的坑。

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