如何覆盖头部静态CSS与jQuery动态加载CSS中重名类的样式

问题根因 #

样式覆盖失效问题核心来自两点：

• 动态CSS的插入位置错误：现有代码将新的link标签插入到了<head>标签的外部、前面位置，加载顺序早于<head>内原有静态引入的CSS文件。CSS同权重规则下，后加载的样式会覆盖先加载的样式，因此你动态加载的CSS优先级反而更低，重名类自然无法覆盖原有样式。
• 若调整插入位置后仍未生效，需排查原有CSS的重名类是否使用了!important标记、或者选择器优先级高于你动态CSS中的选择器。

解决方法 #

第一步：修正动态CSS的插入位置 #

将动态创建的link标签插入到<head>的末尾，保证其加载顺序晚于所有静态CSS，修改LoadCss函数的插入逻辑即可：

var LoadCss = function(cssFile){
    alert('Loading css file '+cssFile);
    var cssLink = document.createElement('link');
    cssLink.rel = 'stylesheet';
    // 可选加时间戳避免加载缓存的旧CSS文件
    cssLink.href = '../'+cssFile + '?t=' + Date.now();
    var head = document.getElementsByTagName('head')[0];
    // 替换原来的insertBefore逻辑，插入到head末尾
    head.appendChild(cssLink);
};

备选兼容方案 #

如果修改插入位置后仍有覆盖失效的情况，可以通过提升动态CSS选择器优先级解决：

• 给动态CSS里的重名类加上通用父级前缀，比如将.class-name改为body .class-name，选择器优先级会高于原有单类选择器，不需要修改原有代码即可实现覆盖。
• 应急场景下可以给动态CSS的对应属性加!important标记，不建议大规模使用，会扰乱整体优先级规则。

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