为何特异性更低的CSS选择器反而被应用？

问题场景 #

我有一个按钮元素：

<button type="button" class="bg-neutral-50 px-2">Show</button>

页面先后引入了两个样式表：先加载rfui-v0-1-11.css，再加载styles.css，结构如下：

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fresh-rfui-test</title>
    <link rel="stylesheet" href="https://rfui.deno.dev/rfui-v0-1-11.css" />
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <Component />
  </body>
</html>

rfui-v0-1-11.css中针对这个按钮的类样式：

.bg-neutral-50 {
  --tw-bg-opacity:1;
  background-color:rgb(var(--color-neutral-50)/var(--tw-bg-opacity))
}

styles.css中的全局按钮样式：

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance:button;
  background-color:transparent;
  background-image:none
}

现在按钮的背景色是transparent（即styles.css中的样式生效），但按照CSS优先级规则，类选择器.bg-neutral-50的特异性（0-1-0）明显高于元素选择器button或属性选择器[type=button]（0-0-1），应该优先应用类样式的背景色，我搞不懂为什么实际结果相反。

我的优先级分析 #

按照CSS层叠顺序规则：

• 相关性：两个选择器都匹配目标按钮，没有被排除。
• 来源与重要性：都是开发者编写的常规样式，没有!important，优先级层级一致。
• 特异性：.bg-neutral-50的特异性更高，按规则应该优先生效。

问题根源 #

问题不在优先级，而在类样式中的CSS变量无效：
如果--color-neutral-50这个变量没有被正确声明（比如rfui样式表中漏掉了这个变量的定义，或者变量值格式错误），浏览器会判定rgb(var(--color-neutral-50)/var(--tw-bg-opacity))是无效的CSS值，直接忽略这个background-color声明。此时浏览器会自动使用下一个有效的同属性声明——也就是styles.css里的background-color:transparent。

你可以用浏览器开发者工具验证：选中按钮后，查看.bg-neutral-50的background-color规则是否被划掉（标注为无效），同时检查--color-neutral-50变量是否有正确的取值。

解决办法 #

1. 确认rfui样式表中是否在:root或按钮的父元素上正确定义了--color-neutral-50变量。
2. 如果变量确实缺失，可以手动补充：比如在styles.css中添加变量声明，或者直接把类样式的背景色替换为具体的颜色值（比如rgb(250 250 250 / var(--tw-bg-opacity))，这是neutral-50的常见色值）。

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