0

このような質問はたくさんありますが、私が抱えている問題に実際に答えるものはありません。

私の状況は次のとおりです。

多くの要素の表示を変更して、それらがページに適切に表示され、セマンティクスが正しくなるようにする必要があります。
私は多少js版とnojs版を持っています。ユーザーが js を使用している場合にのみ表示される要素もあれば、js がオフになっている場合にのみ表示される要素もあります。

私は優れた特異性を持つセレクターを持っています (議論しないでください、それらはコンテキストで本当に意味があります。元のコードがどこにあるかを手放さないように、ここでクラスを変更しただけです)

.imagesContainer div.imageContainer  .imagedata

そして、この要素は、ユーザーがjsを持っていない場合に非表示になることを意図しています. だから私は次のようなことをしました：

.nojs{
    display:none;
}

HTMLは、優先度が外部ファイル<同じファイル<インラインになると予想しているため、同じファイルで試しました。しかし、現在は外部ファイル=同じファイル<インラインのようです（外部ファイルとインラインの間に優先順位はありません）。

この問題に対処する最善の方法は何ですか?

私が示した最初のセレクターの特異性を変更することは解決策ではありません。
また、CSS をインラインで配置したくありません。それは苦痛であり、マークアップでスペースを取りすぎて読みにくくなります。
また、!important を使用しないことをお勧めします。この種の問題を解決する正しい方法ではないと考えられており、私も同意します。
私は XHTML を使用しているため、DTD でスクリプト タグが定義されていません (私が従う規則に従って XHTML を使用する必要があります)。

4

4 に答える 4

2

displayすでにプロパティが設定されている場合は.imagesContainer div.imageContainer .imagedata、単に要素に追加nojsするだけでは、特定のためにオーバーライドされません。次のことを行う必要があります。

.imagesContainer div.imageContainer .imagedata.nojs { display: none; }

nojsまたは、追加された要素。

私があなたなら、これを完全に逆転させます。js を有効にしないと表示されない要素については、display: noneデフォルトで に設定します。次に、ヘッド内のスタイル/リンクまたはその他のスクリプトに対して、いくつかの js を使用jsしてbodyorhtml要素に割り当てます。次に、css.js <the rest of the selector>で要素を表示するための表示プロパティを変更します。

于 2012-10-25T22:03:21.190 に答える
2

@prodigitalsonが正しく指摘しているように、nojsクラスは常に詳細なクラス定義よりも具体的ではありません。

私が見る限り、!important実際には、より具体的なクラス定義を大量に作成せずに、やりたいことを達成する唯一の方法です。

おそらく、このようなケース!importantはもともと設計されたものであり、使用してもまったく問題ありません。!important「正しい」方法で必要な特異性に到達する方法がわからないため、特異性をオーバーライドするために誤用されると問題になります。

于 2012-10-26T07:12:09.957 に答える
1

それで... この問題を解決する方法... それほど簡単ではありませんでしたが、w3c とあなたの回答の助けを借りて、適切な結果を得ることができました。

これを解決する可能性のある複数のパス (プログラムによるスタイルまたはリンク タグの追加を含む) を試した後、必要なものに対する答えが得られました。
これを最も簡単な方法で行うには、少なくとも 2 つのスタイル シートが必要です。1 つはこのシステム用で、もう 1 つは「通常の」スタイル シート (ページのすべての CSS を含むもの) です。

次に、ユーザーが js を使用していない場合にのみ表示するすべての (x)HTML 要素に .nojs クラスを配置し、ユーザーが js を使用している場合にのみ表示する要素に .js を配置します。

このシステムのスタイル シートに次を配置します。

.js{
    display:none !important;
}

次に、この js コードを使用して、完了後に実行します。できれば、DOMContentLoaded イベントがディスパッチされたとき。

var jsNojsStyleSheet = document.styleSheets[1]; // change this index depending on your needs
if(jsNojsStyleSheet.deleteRule){
    jsNojsStyleSheet.deleteRule(0);
    jsNojsStyleSheet.insertRule('.nojs{ display:none !important; }', 0);
}else{
    // IE8 has his own way of dealing with this situation
    jsNojsStyleSheet.removeRule(0);
    jsNojsStyleSheet.addRule('.nojs', 'display:none !important', 0);
}

必要に応じてリストのインデックスを変更することを忘れないでください。

これで、これをテストできます。
これは、.js ルールを削除して .nojs ルールを挿入し、前のものを置き換えることになっています。

これは、私にとって、この仕事をする最もクリーンな方法です。この手法に対する批評家や改善点は大歓迎です。

注: IE では、ページのパーソンを更新するために何らかの操作を行う必要があります。チェックボックスのチェックを2回切り替えるコードを使用しました。創造的で、これに対する独自の解決策を見つけてください。

編集: jQuery などを使用してこの問題を解決する他の手法とは異なり、これははるかに高速で、フリックがないこともわかりました。すべての変更は、CSS が変更されたときの変更に対するブラウザー独自の適応を使用して行われ、各 HTML ノードを 1 つずつ変更するのではありません。

このシステムは IE8 で動作しますが、IE7 については不明です。

于 2012-10-27T19:20:24.117 に答える
0

特異性を計算する正確な方法については、http://www.w3.org/TR/CSS2/cascade.html#specificityを参照してください。

このセクションによると：

count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)

仕様.imagesContainer div.imageContainer .imagedataは 0031 (0 インラインなし、0 ID なし、3 クラス、1 要素) です。表示を上書きするには、この数値を上書きする必要があります。

bodyタグが次のようになると仮定<body id="foobar">して、サンプル要素の表示設定を上書きする必要があります。

#foobar .nojs { display: none; }

特異性が 0110 であり、110 が 31 より大きいためです。(0 インラインなし、1 ID、1 クラス、0 要素)

（ボディタグをidすることを必ずしも推奨しているわけではありません。これは、指定したcssセレクターを上書きするセレクターのネストの例にすぎません）

編集:より具体的な解決策については、このフィドルを参照してください: http://jsfiddle.net/KAuAx/

于 2012-10-26T07:30:34.083 に答える