問題タブ [css-specificity]

私はそれのためのhtmlテーブルとレイアウトを持っています(そのようなもの、また私はhaml + sassを使用します):

私の htm テーブルにはクラス zebra があり、tr にはクラス .zebra-stripe .zebra1 があります

しかし、他のスタイル（ボタンなど）とのリンクがあり、このリンクには背景のある独自の高さがありますが、ホバーすると色がオレンジに設定され、

しかし、マウスがこのリンクの上にあるとき、色はオレンジではなく、テーブルに設定されている青です....何が問題なのですか?

リンクのホバー テキストの色をオレンジ色に設定する方法 (設定したのですが、正しく表示されません)...

何かが明確でない場合は、コメントに書いてください...

次のようなものに具体性を追加するにはどうすればよいですか。

私は次のようなものが欲しい：

次のマークアップがあります。

私のスタイルは次のように定義されています。

私のページでは、リンクはデフォルトのカーソル (矢印) をa.pointer示し、スタイルは IE10 コンソールと firebug でストライクされて表示されます。

私の混乱は、pointerクラスがアンカー要素に直接適用されるため、.breadcrumbs span a一致から選択されたものをオーバーライドするべきではないということです?

複数のページと 1 つの外部スタイル シートがあります。CSS ファイルには次のものがあります。

私が学んだことによると、ボディフォームはより具体的であり、ボディ内のタイプフォームのすべての要素の周りに二重線の境界線を表示する必要があります.

ただし、テストでは、CSS body {} セレクターの上に移動しない限りそうではありません。これは、CSS ファイルの body セレクターがbody formをオーバーライドしていることを意味します。

私は何を間違っていますか？

ご挨拶: 私は何日もかけて、ブラウザーによって計算された各 CSS ルールの正確な CSS 特異性番号を表示するツールを見つけようとしました。CSS の特異性を確認するためのツールを含む多くのオンライン リソースを既に見てきました。そこにあるリンクは、オーバーライドされたクラスなどについて説明していますが、特定の CSS ルールを適用するときにブラウザーによって計算および使用される正確な特異性の数値を確認したいと考えています。

正確な CSS 特異性の計算を確認する必要があるのはなぜですか?
ブラウザが要素へのルールの近接性に基づいて CSS ルールを使用しているという特定の問題を克服できませんが、その前に、ブラウザによって適用されるルールよりも高い特異性を持つ別のルールが定義されています。jsfiddle を使用してデモンストレーションするために使用できる単純なコードがなく、デバッグしようとしているコードが複雑すぎてフィドルに含めることができません。

ほぼすべての検索で、ある種の「CSS 固有性ルール」または「CSS 固有性を理解する」リンクが示されています。CSS の特異性がどのように機能するかを理解し、Firebug と Chrome 開発者ツールを幅広く使用し、特異性のルールを理解するためのリンクをよく知っています。私の探求は、ある CSS ルールを別の CSS ルールに適用するときに、ブラウザ エンジンがどのようなことを考えているのかを調べてみることです! そして、どのルールが他のルールをオーバーライドするかを決定するためにこの情報をすでに計算しているので、何らかの方法でアクセス可能な情報になるはずですが、どうすればよいでしょうか?

私が直面している問題の非常に基本的な例:

または、次のようにコーディングすることもできます.... (最終結果に違いはありません。)

そして、HTML構造は次のようになります...

この問題をデバッグする最善の方法は、特定のルールを想定して毎回手動で計算するのではなく、ブラウザーの CSS 固有性の計算を確認することだと思いました。また、ブラウザーは適用中に既にこれを計算しているため、これらの特異性ルールのブラウザー計算を覗くツールを探していましたが、Firebug または Chrome インスペクターでそれを行う方法が見つかりません。

他の誰かがこれについて知っていて、誰かが存在する可能性のあるツールを教えてくれますか? 大変お世話になりました。ありがとうございました！

編集： 「私が苦労しているもののようなもの」を再現して実証できるかどうかを確認するために、フィドルをまとめようとしました。私は運が良かったと思います - http://jsfiddle.net/smallworld/abvHC/1/を見てください。このフィドルの問題はまだ単純すぎますが、クラスが動的に割り当てられるという私の課題を代表しているため、正確な順序を予測する方法がありません。フィドルの例 3 は、計算された特異性を確認する必要があった理由の代表的なケースです。いずれにせよ、計算した数値とブラウザの計算を比較できるようになれば素晴らしいと思います。

別の編集: 特定の要素に対するブラウザーの特異性スコアをのぞき見するという私の探求に対する答えはまだありませんが、Faust や他の人が、私が直面していた元の問題に対する可能な解決策に私を導いたと思います。以下のコメントスレッドを参照してください。その質問がブラウザの特異性スコアを表示できるかどうかに関するものであることを考えると、この質問は開いたままにしておくこともできます.現在、それを行うためのツールが利用できないという答えになる可能性が非常に高いです.

ここで私のスタイルシートで本当に混乱しています。シートに特定のリンク スタイルがたくさんありますが、Chrome Dev Tools または Firebug でページをチェックすると、何らかの理由でそのうちの 1 つが別のものによって上書きされます。!important のケースをいじくり回して、ゆっくりと私のコードを完全にひどいものにしていることに気づいた後、それらをすべて削除し、リンクスタイルを整理して、適切な場所にすべての適切なスタイルを配置せずに取得する方法を見つけようとしています。オーバーライドされます。

基本的に私はそうしています：

そして、.newlinks は「.abclink a」から「何らかのスタイリング」を取得しています。クラスに「p」などのような特定の名前ではなく、特定の名前がある場合、なぜこれが起こるのか、私は本当に混乱しています。どんな説明でも役に立ちます！ありがとうございました！

編集：これがhtmlの順序です

必要に応じてより長いコードを投稿することもできますが、注文や言葉遣いなどの一般的な問題かもしれないと思っただけです。

editit: ここでは、jfiddle 内の関連する css/html です

http://jsfiddle.net/Ub6er/

jsfiddleでわかるように、「underrighttext」のリンクは.dlからスタイルを取得しています:(