5

各ページに DIV を挿入する Chrome 拡張機能があり、拡張機能に含まれるスタイル シートでその DIV をスタイルします。挿入された DIV が意図したとおりに見えるページもあれば、そうでないページもあります。たとえば、StackOverflow サイトの 1 つでは、CSS のように指定されbox-shadowているにもかかわらず、要素のプロパティがオーバーライドされます。! important

問題の要素を調べると、Chrome はbox-shadowプロパティが適用されていない (取り消し線が引かれている) ことを教えてくれますが、その理由は教えてくれません。

プロパティを要素に直接追加したときbox-shadow(CSS クラスの利点なし)、CSS インスペクタ ビューは、プロパティが要素に関連付けられていることを示しましたが、効果はまだありません。

更新: コード スニペット:

コードで指定するものは次のとおりです。

    var $bar = $('<div>').addClass('pp_bar').css({
        'box-shadow': '-1px 0px 2px 1px #444',
        '-moz-box-shadow': '-1px 0px 2px 1px #444',
        '-webkit-box-shadow': '-1px 0px 2px 1px #444'
    });

CSSは次のとおりです。

.pp_bar {
    height: 80%;
    right: -4px;
    top: 0px;
    position: absolute;
    box-shadow: -1px 0px 2px 1px #444 ! important;
    -webkit-box-shadow: -1px 1px 2px 1px #444 ! important;
    -moz-box-shadow: -1px 1px 2px 1px #444 ! important;
}

Chrome が計算されたスタイルとして表示するものは次のとおりです。

-webkit-box-shadow: #444 0px 0px 1.2000000476837158px 0px;
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

使用されている値 ( #444 0px 0px 1.2000000476837158px 0px) が要素のスタイルとは異なることがわかります (私のコードで割り当てられているとおりです。要素のスタイルはクラスの値を上書きします (同じです)。要素のスタイルを設定しないと、クラスの値は打ち消されて表示されます。

これが正しく機能するサイトでは、ブラウザーは計算されたスタイルで次のように報告します。

-webkit-box-shadow: #444 -1px 1px 2px 1px;
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

次に何を試せばいいですか？

4

1 に答える 1

0

!importantフラグを使用して、要素自体にスタイルを設定します。そうすれば、スタイルが最も優先度の高い要素に適用されていることを確認できます。

例：

var div = document.createElement('div');
// Pick any of these (the first two lines have identical results)
div.style.setProperty('box-shadow', '0 0 3px red', 'important');
div.style.cssText += 'box-shadow: 0 0 3px red !important';

// If the HTML is generated from a string:
div.innerHTML = '<div style="box-shadow:0 0 3px!important;">...</div>';

非例（機能しません！）：

div.style.boxShadow = '0 0 3px red !important'; // Does not work!

インラインスタイルを設定する余裕がない場合は、たとえばIDを含めるなどして、CSSセレクターでより高い特異性を実現するようにしてください。

于 2012-10-18T09:02:49.607 に答える