ご挨拶：ブラウザで計算された各CSSルールの正確なCSS固有番号を表示するツールを探していました。私はすでにTools to see CSS specificityを含む多くのオンラインリソースを見てきました - オーバーライドされたクラスなどについてのリンクがありますが、特定のCSSルールを適用する際にブラウザが計算して使用する正確な識別番号が必要です。ブラウザの計算されたCSSの特異性を表示するには？
正確なCSS特異性計算をする必要があるのはなぜですか？
ブラウザがそのルールの近接性に基づいてCSSルールを使用している特定の問題を克服することはできませんが、ブラウザによって適用されるルールより高い特異性を持つ別のルールが定義されています。 jsfiddleを使用してデモするために使用できる単純なコードがなく、デバッグしようとしているコードが複雑すぎてフィドルに含めることができません。
ほとんどすべての検索で、「CSSの特殊性のルール」や「CSSの特殊性の理解」のリンクが指摘されています。私は、CSSの特異性がどのように機能するのか、FirebugとChrome開発ツールを広く使用していること、そして特異性のルールを理解することを指すリンクを十分に理解していることを理解しています。 私のクエストは、あるCSSルールを別のCSSルールに適用するときに、どのブラウザエンジンが考えているかを調べることです。そして、すでにどのルールが他のルールよりも優先されるかを決定するためにこの情報を計算しているので、どうにかそれはアクセス可能な情報でなければなりません。
私が直面しています問題の非常に基本例：
.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles }
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles }
それとも....このようなものをコード化された（最終的な結果ではいずれかが異なることはありません。）することができ
を.testClass1 .title { corresponding CSS styles } --- call it Rule 1
.testClass2 .testClass1 .title { corresponding CSS styles } --- call it Rule 2
.testClass2 .title { corresponding CSS styles } --- call it Rule 3
.testClass1 .testClass2 .title { corresponding CSS styles } --- call it Rule 4
そして、HTMLの構造、このようになります...
<!-- delivers intended results -->
<div class="testClass1">
<div class="title">Some Title</div>
</div>
<!-- Does not deliver intended results.
- I expected Rule 1 or Rule 2 to take effect, but Rule 3 gets
applied because of its proximity to the actual HTML element.
i.e. rule 3 is defined later in CSS then rule 1 and 2. -->
<div class="testClass2">
<div class="testClass1">
<div class="title">Some Title</div>
</div>
</div>
私はこれをデバッグするための最良の方法であると思いました私は特定のルールを想定して毎回手動で計算する代わりに、ブラウザのCSSの特異性の計算を見ているだろう。また、ブラウザは既に適用しているのでこれを計算しているので、私はこれらの特殊ルールのブラウザ計算を調べるためのツールを探していましたが、FirebugまたはChromeのインスペクタでそれを行う方法は見つかりませんでした。
誰かがこれについて知っていますか、誰かが存在するかもしれないツールに私を指摘できますか？私はあなたの助けに大変感謝しています。ありがとうございました！
EDIT： 私は証明するために、「私が苦労しています何のようなものを」再現できるかどうかを確認するために一緒にバイオリンを入れてみました。私は運がいいと思う - http://jsfiddle.net/smallworld/abvHC/1/を見てください。このフィドルの問題はまだまだ単純ですが、クラスが動的に割り当てられるので、正確な順序を予測する方法がないという私の挑戦を代表するものです。フィドルの例3は、計算された特異性をなぜ知る必要があるのかを代表するものです。いずれにしても、計算された数値をブラウザの計算と比較できることは素晴らしいと思います。
ANOTHER EDIT： 私はまだ指定された要素のブラウザの特異性スコアにのぞくための私の探求への答えを持っていませんが、私はファウストと他の人は私がいた元の問題に対する可能な解決策に私を導いたと思います向いている。下記のコメントスレッドをご覧ください。その質問がブラウザの特異度を見ることができるということを考えれば、私はこの質問を開いたままにしておくことができます - 現在、そうすることができるツールはありません。
開発ツールは、すべての情報を表示します（実際の数値は除きます） – SLaks
自分で計算してみませんか？あなたの特異性は、** 0,2,0 **、** 0,3,0 **、** 0,2,0 **、** 0,3,0 **です。計算が難しくなく、ブラウザは他のブラウザとは異なる計算をしません。ルール2はルール3よりも具体的であり、常に優先します。予期しない結果が見られる場合は、別のスタイルやタイプミスがあります。私はブラウザが "近接"に基づいてCSSを適用していないことを保証します。 Chromeデベロッパーツールをチェックして、要素に一致するCSSセレクターを確認し、CSSが有効であることを確認してください。 – animuson
SLaks - その正確な数字は私の理解とブラウザの解釈が一致していないので、私はそれが私が行方不明であることを理解したいと思っているからです。 – smallworld