Question

作为移动优先构建的一部分，我以阻塞的方式动态加载'桌面'css

<script type="text/javascript">
    var mq = window.matchMedia("(min-width: 640px)");
    if(mq.matches){
        var stylesheet = document.createElement('link');
        stylesheet.href = '<?php echo $src ?>';
        stylesheet.rel = 'stylesheet';
        stylesheet.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(stylesheet);
    }
</script>

但是，webkit和ff为css加载的预注入提供了更多的动力。

enter image description here

即使加载mboxes.css前3秒SetTimeout，浏览器仍然支持未注入的css规则。

我如何才能获得css特异性规则？

Answer 1

问题是正在加载的CSS的排序，它将event_core的值作为主加载，因此要覆盖它，你有2个简单的选项而不重写js。

您可以在event_core.css之前或之后执行Javascript，具体取决于您目前拥有的内容。

或者最简单的方法，但实际上取决于你在mboxes.css中使用多少CSS！在CSS中很重要，这将告诉浏览器这些最重要的并成为新的主人。

例如

.mob p {
color:white!important;
}

或者编辑规则以使两者相同，例如.content＆gt; .mbox p

Answer 2

好的，解决了这个问题。

要使CSS“正常”运行，需要将其注入<body>而不是<head>。

document.getElementsByTagName('body')[0].appendChild(stylesheet);

Answer 3

问题与加载css文件的方式无关，而与css优先级规则有关。基本上，选择器越具体，规则的优先级越高。在你的情况下，两个选择器都是相同的优先级（类和元素选择器），~~所以一些浏览器将选择一个，另一个~~最后加载的应该覆盖第一个，但它不是我想要的东西。

修复方法是使mboxes.css中的规则更具体，如.mbox.main_content p。

第二个选项是在每个样式之后添加!important（如color: white !important），但我建议不要这样做。

CSS：特异性不适用于js注入样式表？

3 个答案: