なぜ*
を使ってはいけないのか、なぜ>
が素晴らしいのかという情報については、CSSDOMがどのように作られているかを理解することが重要です。
セレクタ、たとえばdiv p .someclass
があると、ブラウザは山ほどのチェックを行う必要があります。 これはかなり簡単な操作です。 次に、集めたすべての .someclass
要素の親をチェックして、p
の親を持つかどうかを確認し、持たないものは破棄します。 次に、集めた.someclass
の子を持つすべてのpタグの親をチェックし、div
の親を持つかどうかを調べます。 そうやって、自分の立ち位置を確認するのです。 だからもちろん、.specific-someclass
を使えば、そのほうがずっとコストがかからないんですけどね。
ここで>
の価値が出てくる。 div > p > .someclass
があれば、ブラウザが .someclass
の親である p
をチェックしたときに、すぐに停止することができます。 1つ上の階層をたどるだけでいいのです。 はるかに少ないコストで済みます。
*
が現れるたびに、ブラウザはページ上のすべての要素を収集する必要があります。 これはお金のかかる作業なので、避けた方がよいでしょう。 #some-very-specific-id *
の場合、ブラウザが最初にすることは、すべての要素を集めて、どの要素が#some-very-specific-id
を祖先に持つかをチェックすることです。 ページ内の血まみれの要素すべてがチェックされるのです。 Bad juju.
Apologies if my info is out of date. CSS ペイントについて何かを知らなければならなくなってから、長い時間が経ちました。