当使用 reset.css 清除了表单元素的边框（如 `border: 0`）后，后续样式中定义的 `border-bottom` 无法生效，通常是因为选择器权重不足或重置规则作用范围更广（如通配符或属性选择器），需通过提升特异性或合理调整层叠顺序来解决。
在你的代码中，reset.css 使用了高特异性的属性选择器 [type=”text” i]（注意 i 表示不区分大小写匹配），并直接设置了 border: 0 —— 这会完全覆盖所有 border-* 子属性（包括 border-bottom），即使 base.css 中后续声明了 border-bottom，只要其选择器权重 ≤ 重置规则，就不会生效。
? 根本原因分析：
CSS 层叠遵循「源顺序 + 特异性（specificity）+ !important」三重规则。你当前的 .border–style 类选择器特异性为 0,1,0（1 个 class），而 input[type=”text” i] 的特异性为 0,1,1（1 个 type + 1 个属性），后者更高，因此 border: 0 始终胜出。
✅ 推荐解决方案（按优先级排序）：
-
提升选择器特异性（首选，语义清晰且可维护）
在 base.css 中将规则改为更具体的选择器，例如：input.border--style, input[type="text"].border--style { border-radius: 4px; border-bottom: 1px solid var(--border-color-grey); }此时特异性升至 0,2,1（2 个 class + 1 个 type），稳超 reset 规则。
-
确保样式表加载顺序正确（已满足，但需确认无缓存干扰）
你已将 base.css 放在 reset.css 之后，符合层叠逻辑。建议清空浏览器缓存或硬刷新（Ctrl+F5），避免旧样式残留。 -
慎用 !important（仅作临时调试或兜底）
如需快速验证，可临时添加：.border--style { border-radius: 4px; border-bottom: 1px solid var(--border-color-grey) !important; }⚠️ 注意：!important 会破坏 CSS 可维护性，不建议长期使用；若必须用，请同步在 reset 规则中也加 !important（不推荐）或重构 reset 策略。
立即学习“前端免费学习笔记（深入）”；
? 进阶建议：
- 避免在 reset.css 中对 input[type=”text”] 等具体元素做过度重置（如 border: 0）。现代 reset 更推荐仅重置通用盒模型（margin, padding, box-sizing），保留表单控件默认可访问性样式，再由 base/ui 层统一增强。
- 使用 CSS 自定义属性（如 –input-border）配合 :is() 或 :where() 实现更灵活的覆盖。
总结：不是 border-bottom 本身无效，而是它被更高权重的 border: 0 全局重置所压制。通过提高选择器特异性（如组合 class + type 选择器），即可优雅、可持续地覆盖重置样式。