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 がロードされたプレインジェクションにより多くの力を与えます。

ここに画像の説明を入力

SetTimeoutmboxes.css をロードする3 秒前であっても、ブラウザーは挿入されていない CSS ルールを引き続き優先します。

css 固有性ルールを動作させるにはどうすればよいですか?

4

3 に答える 3

0

わかりました、これで解決しました。

<body>CSS が「正常に」動作するには、ではなくに挿入する必要があります<head>。

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

問題は、ロードされる CSS の順序です。event_core の値をマスターとしてロードしているため、これをオーバーライドするには、js を書き換えずに 2 つの簡単なオプションがあります。

現時点で何があるかに応じて、event_core.css の前または後に Javascript を実行できます。

または、最も簡単な方法ですが、mboxes.css にある CSS の量に応じて、CSS 内で !important を使用し、これらが最も重要であり、新しいマスターになることをブラウザーに伝えます。

例えば

.mob p {
color:white!important;
}

または、両方が同じになるようにルールを編集します。たとえば、.content > .mbox p

于 2013-01-13T12:23:16.423 に答える
-1

この問題は、css ファイルのロード方法とは関係なく、css の優先順位のルールと関係があります。基本的に、セレクターが具体的であるほど、ルールの優先度が高くなります。あなたの場合、両方のセレクターが同じ優先度 (クラスと要素セレクター) であるため、一部のブラウザーはいずれかを選択し、他のブラウザーは最後にロードされたものが最初のものをオーバーライドする必要がありますが、それは私が期待するものではありません。

修正は、mboxes.css のルールをより具体的なものにすること.mbox.main_content pです。

2 番目のオプションは!important、各スタイルの後に like (like color: white !important) を追加することですが、それはお勧めしません。

于 2013-01-13T12:22:55.657 に答える