CSS类选择器width样式未生效、行内样式正常问题排查求助

首先纠正一个常见认知误区：HTML的class属性中类名的书写顺序完全不影响样式优先级，优先级仅和选择器权重、CSS规则的书写顺序有关，相同权重的规则，写在CSS文件靠后的会覆盖靠前的。

你遇到的问题大概率是以下原因导致的：

• 选择器权重不足被覆盖
  你写的.smallerDatetime属于单类选择器，权重为10。如果公共CSS里存在更高权重的规则命中该input，就会覆盖你的样式，常见的高权重规则包括：
  • 多类组合选择器，比如.form-control.datetimeController（权重20）
  • 标签+类组合选择器，比如input.form-control（权重1+10=11）
  • 带ID的选择器，比如#formWrap .form-control（权重100+10=110）
  • 带!important标记的width规则，权重高于所有非!important的普通规则
    你可以打开浏览器开发者工具的元素样式面板，被划掉的width:160px旁会明确标注覆盖它的规则来源，直接定位对应的冲突规则即可。
• CSS规则书写顺序靠先
  如果存在和.smallerDatetime权重相同的规则设置了width属性，且写在你的规则之后，也会覆盖你的样式。你可以尝试把.smallerDatetime的规则移到当前CSS文件的最末尾再测试。
• 规则被语法错误截断
  如果你新增的规则之前的其他CSS规则存在语法错误（比如少写了闭合的}、属性名拼写错误未被浏览器识别），可能会导致后续的规则被浏览器异常解析失效，即使你看到规则加载成功也不会生效。可以检查该规则前后的语法是否正确。
• 规则被媒体查询限制
  如果你把.smallerDatetime写在了某个媒体查询块（比如@media (min-width: 1200px)）内，当前浏览器视口不满足媒体查询的触发条件时，该规则也不会生效。
• JS动态修改样式
  页面加载完成后如果有JS脚本动态给该input设置了width属性、或者新增了更高权重的类，也会覆盖你的CSS规则。可以在开发者工具的事件监听器面板排查对应元素的关联脚本。

快速解决方案 #

如果不想修改原有公共规则，可以通过提升你的选择器权重解决，示例：

/* 双类组合，权重高于单类的form-control */
.form-control.smallerDatetime {
    width: 160px;
}

非特殊情况不推荐使用!important强行提权，会破坏全局样式优先级逻辑。

内容的提问来源于stack exchange，提问作者Zaid Al Shattle