これは、各セレクタを数字に置き換えると分かりやすいです。
各セレクタの数値は以下のようになります。

セレクタ	数値
インラインによる表記 （style="color:red;"）	1000
IDによる表記 （例：#wrapper）	100
classによる表記 （例：.kakomi）	10
各タグに対する表記 （例：h1）	1

インラインによる表記はセレクタではありませんが入れておきました。
また、擬似セレクタ（a:hover等）に関してはタグに対する表記と同じ「1」となります。

以上を子孫セレクタ表記の場合は全て足してあげればいいということになります。
例えば以下の様なHTMLがあった場合、H1に対しては以下の様なセレクタが考えられます。

• h1
• .catch
• #header h1
• #header .catch
• .head h1
• .head .catch
• div h1
• div .catch

これをそれぞれ数値化して足し算したのが以下。

• h1＝1
• .catch＝10
• #header h1＝100＋1＝101
• #header .catch＝100＋10＝110
• .head h1＝10＋1＝11
• .head .catch＝10＋10＝20
• div h1＝1＋1＝2
• div .catch＝1＋10＝11

となるわけで、それぞれ同じプロパティが書かれていた場合、優先順位の一番高い「#header .catch」に書かれた値になるとこういうわけです。
当然、「#header .catch」に該当のプロパティが書かれていなければ、次の「#header h1」の値になります。

なお、数値が全く同じ場合（上記の「.head h1」と「div .catch」等）はCSSファイル内において下に書かれたものが適応されるようになっています。
この辺りは擬似セレクタ（a:hover、a:visited等）を書くときに順番を気にしなければならないのと同じ仕組ですね。

今までは、最終手段としてインライン表記をよく利用していましたが、これからは子孫セレクタに親を追加してあげるというのも、書いたCSSが適応されない時の対策として有効だなと感じました。

なお、「!importantルール」を使って優先順位を操作するという方法もあります。
これに関してはまたいずれ。