0

作为移动优先构建的一部分，我以阻塞方式动态加载“桌面”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 的预注入提供了更多功能。

在此处输入图像描述

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

我怎样才能让 css 特异性规则表现出来？

4

3 回答 3

0

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

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

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

例如

.mob p {
color:white!important;
}

或者对规则进行编辑，使两者相同，例如 .content > .mbox p

于 2013-01-13T12:23:16.423 回答
0

好的，解决了这个问题。

为了让 CSS 表现“正常”，它需要被注入到<body>not <head>.

document.getElementsByTagName('body')[0].appendChild(stylesheet);
于 2013-01-13T14:15:27.797 回答
-1

这个问题与 css 文件的加载方式无关，更多的是与 css 优先级规则有关。基本上，选择器越具体，规则的优先级就越高。在您的情况下，两个选择器具有相同的优先级（类和元素选择器），因此某些浏览器会选择一个，其他最后加载的另一个应该覆盖第一个，但这不是我所指望的。

解决方法是使 mboxes.css 中的规则更具体，例如.mbox.main_content p.

第二种选择是!important在每种样式之后添加 (like color: white !important)，但我建议不要这样做。

于 2013-01-13T12:22:55.657 回答