CSSと対象要素、確認したいプロパティを入力すると、競合するルールを洗い出して詳細度・!important・記述順から「なぜそのルールが勝っているか」を判定します。
貼り付けたCSSの範囲内での判定です。外部ファイルやインラインstyle属性、ブラウザ拡張機能などの影響は考慮されません。
詳細度(a, b, c)が完全に同じ2つのルールが同じ要素・同じプロパティを指定している場合、詳細度では優劣がつきません。このときブラウザは「CSSファイル内、あるいは複数ファイルの読み込み順の中で、より後に登場したルール」を採用します(後勝ちの原則)。本ツールの診断結果でも、この記述順を「順位」の判定材料として表示しています。
!important を付けた宣言は、詳細度の計算結果に関係なく最優先で適用されます。ただし !important 同士が競合した場合は、通常のCSS同様に詳細度、それでも決まらなければ記述順で決着します。多用すると後からの上書きが困難になるため、局所的な緊急回避策として使うのが基本です。
style="" 属性は、通常の詳細度計算(ID・クラス・要素セレクタ)よりも常に優先されます。唯一これに勝てるのは !important を付けたCSSルールのみです。