17370845950

当使用 reset.css 清除了表单元素的默认边框（如 `border: 0`）后，若在后续样式表中无法通过 `.border--style` 类重新设置 `border-bottom`，通常是因为选择器权重不足或重置规则作用范围过广，需通过提高特异性或合理调整层叠顺序解决。

问题根源在于 CSS 层叠与选择器优先级。你提供的 reset.css 中使用了 [tags...], input[type="text" i] 这类高特异性选择器（尤其是 input[type="text" i] —— 浏览器内部伪类，常见于 Chrome/Edge 的用户代理样式注入），其优先级远高于简单的类选择器 .border--style。虽然 border-radius 生效（因 border: 0 不影响圆角），但 border-bottom 被 border: 0 完全覆盖——因为 border 是复合属性，会重置 border-top/border-right/border-bottom/border-left 及其子属性（颜色、宽度、样式）。

✅ 正确解决方案（按推荐顺序）：

1. 提升选择器特异性（首选，语义清晰且可维护）
   避免 !important，改用更具体的选择器匹配目标元素：

   /* base.css */
   input.border--style,
   input[type="text"].border--style {
       border-radius: 4px;
       border-bottom: 1px solid var(--border-color-grey);
       /* 显式重置其他边框，避免被 reset.css 的 border:0 覆盖 */
       border-top: none;
       border-left: none;
       border-right: none;
   }

2. 确保样式表加载顺序正确（已满足）
   你当前 顺序（reset.css → base.css）是正确的，CSS 后加载的规则可覆盖前序同权重规则。

3. 检查是否遗漏 box-sizing 影响视觉表现
   Reset.css 常附带 box-sizing: border-box 重置，若未继承可能导致尺寸异常，建议在 base.css 中统一声明：

   * { box-sizing: border-box; }

⚠️ 注意事项：

• ❌ 避免滥用 !important（如 border-bottom: 1px solid red !important;）。它虽能强制生效，但破坏层叠逻辑，增加后期维护成本，且可能引发难以调试的样式冲突。
• ✅ 使用浏览器开发者工具（Elements → Styles 面板）验证：展开 input 元素，查看哪条 border 规则被划掉（strikethrough），点击右侧链接可跳转到对应 CSS 文件行号，快速定位冲突来源。
• ? 若 reset.css 来自第三方库（如 Normalize.css 或自定义重置），建议查阅其文档，部分版本会对 input 设置 border: 0 + outline: 0，此时还需额外处理焦点状态（如 input:focus { outline: 2px solid #007bff; }）以保障可访问性。

总结：CSS 覆盖失败本质是优先级与层叠逻辑问题。通过增强选择器特异性、显式声明所需边框子属性、并善用开发者工具诊断，即可稳健解决重置样式干扰，无需依赖 !important。