Blazor @attributes参数导致hover样式失效问题咨询

• CSS优先级冲突
  内联style属性的优先级远高于类选择器。当你通过@attributes把style="background-color:burlywood"传给<button>时，这个内联样式会直接成为按钮的默认背景色。你的.button:hover:enabled类选择器样式优先级不足，hover状态下无法覆盖内联的背景色设置。

• @attributes的渲染逻辑
  Blazor的@attributes会把外部传入的属性原封不动渲染到目标元素上，这里就是<button>标签。所以传入的style和直接写在<button>上的内联style完全等价，CSS优先级规则同样适用。

• 可行的解决方向

  • 优先用CSS类替代内联style：比如定义.bg-burlywood类，用户使用组件时传入class="bg-burlywood"，然后通过提升选择器权重（比如.button.bg-burlywood:hover:enabled）让hover样式生效。
  • 如果必须支持内联style，可借助CSS变量：组件内将传入的style与变量结合，例如<button style="@($"{attributes["style"]}; --hover-bg: #你的hover颜色")" class="button" @attributes="...">，然后CSS改为.button:hover:enabled { background-color: var(--hover-bg); }，不过需要额外处理属性的解析与合并。

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