CSS优先级异常：宽泛width:100%规则覆盖精确选择器（Chrome问题）

这大概率不是Chrome的bug，更可能是以下几种场景导致的浏览器表现差异：

1. 选择器实际匹配的元素不一致 #

Chrome的DOM渲染可能和你预期存在细微偏差：

• 打开Chrome开发者工具的Elements面板，检查目标<span>是否真的被你的精确选择器#songFields > div > span.k-input.k-textbox匹配。比如：
  • 目标span的父<div>是不是#songFields的直接子元素？有没有嵌套额外的容器元素？
  • span的类名是否确实同时包含k-input和k-textbox？有没有动态脚本修改了类名？
• 如果选择器没命中目标元素，Chrome自然会 fallback 到通用规则。

2. CSS特殊性计算的细节偏差 #

虽然按权重计算你的精确规则（ID选择器+2个类选择器+元素选择器，权重值121）远高于通用规则（单个类选择器，权重值10），但仍有特殊情况：

• 检查通用规则是否被第三方代码追加了!important标记，!important会直接无视权重优先级生效；
• 确认你的精确规则是否在通用规则之后加载。如果通用规则后加载，且浏览器解析时出现权重计算的边缘情况（虽罕见，但可能），也会导致覆盖。

3. 行内元素的宽度渲染差异 #

<span>默认是行内元素，width属性默认不生效。如果.k-textbox类没有将其改为inline-block或block，Chrome和Firefox对行内元素width的处理可能存在细微差异：

• 检查.k-textbox的display属性，确保它是inline-block/block，这样width设置才会生效。

快速排查与解决 #

1. 用Chrome开发者工具的Styles面板，查看目标元素的计算样式：
   • 找到你的精确规则，看是否被划掉（划掉说明没生效），鼠标悬停在划掉的规则上，会显示被哪个规则覆盖；
2. 若确认选择器匹配但权重不足，可提升精确规则的特殊性，比如：

   #songFields > div > span.k-input.k-textbox.k-textbox { width: 300px; }
   

   （重复类选择器会累加权重），或者临时用!important应急（不推荐长期使用）；
3. 确保你的精确规则在通用规则之后加载，优先覆盖。

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