Blazor WebApp中CSS类优先级问题：背景色无法正常切换

这问题核心是CSS选择器的特异性（Specificity）和样式定义顺序在起作用，跟你在HTML里调整类的先后顺序完全无关。

为什么会这样？ #

你定义的.gray和.fill都是单一类选择器，它们的特异性权重完全相同。当两个选择器针对同一个元素设置同一个属性（这里是background-color）时，CSS文件里后定义的样式会覆盖先定义的。

看你的CSS代码：

.gray {
    background-color: #494949;
    /* 其他样式 */
}
.fill {
    width: 100%;
    height: 12%;
    background-color: lightcyan; /* 这个定义在.gray之后 */
}

不管你在HTML里写fill gray还是gray fill，浏览器都会优先应用.fill的background-color，因为它在CSS里是后出现的。

解决方法 #

你有几种可行的修复方式：

1. 调整CSS里的定义顺序

把.gray放在.fill之后，这样当两个类同时存在时，.gray的背景色会覆盖.fill的：

.btnClass {
    border-radius:6px;
    padding: 5px;
    text-align:center;
    text-decoration:none;
    display: inline-block;
    font-size:1em;
}
.fill {
    width: 100%;
    height: 12%;
    background-color: lightcyan;
}
.gray { /* 移到.fill后面 */
    background-color: #494949;
    border: 1px solid black;
    color: white;
}

2. 提高.gray的特异性

给.gray加上父类选择器，让它的特异性比.fill更高，这样不管定义顺序如何，.gray的样式都会优先生效：

.btnClass.gray { /* 同时匹配.btnClass和.gray类的元素 */
    background-color: #494949;
    border: 1px solid black;
    color: white;
}
.fill {
    width: 100%;
    height: 12%;
    background-color: lightcyan;
}

这种方式更健壮，不会因为后续CSS顺序调整而失效。

3. （不推荐）使用!important

在.gray的background-color后加!important强制覆盖，但这种方式会破坏CSS的层级规则，后期维护容易出问题：

.gray {
    background-color: #494949 !important;
    border: 1px solid black;
    color: white;
}

验证修改 #

调整后，当ExampleBoolean为false时，按钮会同时拥有fill和gray类，此时.gray的背景色会正常显示；切换为true时，只保留fill类，背景色变为lightcyan。

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