为何base.css的border-bottom无法覆盖reset.css的border:0属性？

问题原因 #

你的reset.css中input[type="text" i]选择器与base.css里的.border--style类选择器CSS优先级完全相同（特异性值均为10）。尽管base.css在reset.css之后加载，但border:0作为简写属性会重置所有边框的宽度、样式和颜色；同时如果--border-color-grey变量未定义，边框会因颜色透明而看起来未生效。

解决方案 #

1. 提高选择器优先级（推荐）

修改base.css中的选择器，结合元素类型提升优先级，确保样式能覆盖reset中的设置：

input.border--style {
    border-radius: 4px;
    border-bottom: 1px solid var(--border-color-grey);
}

此选择器的特异性值为20（元素选择器+类选择器），高于input[type="text" i]的10，能确保边框样式生效。

2. 明确重置边框基础属性

在.border--style中先重置边框样式，避免简写属性的影响：

.border--style {
    border-radius: 4px;
    border-style: none; /* 先统一重置边框样式 */
    border-bottom: 1px solid var(--border-color-grey);
}

3. 检查变量定义

确保已在CSS中定义--border-color-grey变量，比如在全局:root中：

:root {
    --border-color-grey: #cccccc; /* 替换为你实际需要的颜色 */
}

未定义的变量会被浏览器视为透明值，导致边框不可见。

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