CSS2.1では、セレクタは単純セレクタを結合子(#, (半角スペース),>,+など)でつなぎます。
したがって、
#boxは、*#boxとみなして処理します。この場合詳細度は[0,1,0,0]になりますね。
5.3 Universal selector ( http://www.w3.org/TR/CSS2/selector.html#universal-selector )
全称セレクタはc=0なので。
全称セレクタは詳細度がc=0なので、省略できますが、本来は書くべきです。一意セレクタ(結合子は#)は、その文書中に一箇所しか存在しませんし、詳細度がb=1なので多くの場合支障はありませんが、
p#important{color:red;} /* 詳細度[0,1,0,1] */
と
#important{color:green;} /* 詳細度[0,1,0,0]
と並列して書くと、順番に関係なく上記が有効となります。
意味的に#boxは*#boxのこと[詳細度0100]であり、p#boxは要素セレクタに?がったもので詳細度は[0101]になりますね。
★現在、標準として使用されているCSS2では、#boxは、全称セレクタ(universal selector)を省略した表し方と言う意味です。
★逆に言うと、*#boxの*は省略できる。
★div#boxとは意味が違う。
本来一意セレクタなので、*をつける(あるいは省略)した場合は、同じ要素を指定しますが、タイプセレクタ(要素名のこと)をつければ詳細度を上げることができる。
詳細度と結合子の関係はとても重要--CSSの最も根幹部分--です。プロパティより重要です。
ここからは直接関係ないですが
注) id=boxなんて通常は書かない。
idは本来はアンカーの終点であって、スタイルシートで特定の要素を対して、特異的にスタイルを定義したいときに使いますが、詳細度が高すぎて、詳細度で上書きしにくい。
アンカー終端ですから、id="siteMenue"のように、あとから読み直して解るものをつける。スタイルシートのためだけにIDをつけるのは初心者以外余りありませんが、それでもあとで文書のどこを示しているかわかるように命名する。
たとえばHTMLが
<div class="article">
<div class="header">
<h1>見出し</h1>
<div class="abstract">
<p>このページの要約でここは<strong>重要</strong></p>
</div>
<div class="nav" id="pageIndwx">
<ol>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
</div>
<div class="section" id="section1">
<h2>本文見出し</h2>
<p>ここから本文、この部分は、<strong>重要</strong>です。
</div>
のように、class名を文意上意味があるものにしていたら。
strong{color:red;}/* 詳細度[0001]*/
div.header p{font-size:0.9em;}/* 詳細度[0012] */
div.section p strong{color:green;font-weight:normal;}/* 詳細度[0013] */
と、わざわざIDを振る必要はありませんし、後でメンテナンスも
strong要素は{color:red;}赤字で・・・
div.headerの子孫のp段落は{font-size:0.9em;}一回り小さな文字で
div.section本文の p段落内の strong{color:green;}は赤字で普通の太さで・・
とHTMLを見なくても指定できますし、スタイルシートのために煩雑で解りにくいHTMLを書く必要もない。HTMLもCSSもとても簡単でメンテナンスも容易になりますね。
まあ、アンカー終点でもないのにIDをつけるのはおかしいとでも覚えて置きゃよいです。CSSカスケーディングスタイルシートですから、カスケーディングを使えば無駄なIDやclass名はいらない。そのためのCSSですからね。
お礼
回答ありがとうございます。 http://oshiete.goo.ne.jp/qa/3925412.html で、同じ質問をした方がいたので すでに解決に至っていましたが、 大変参考になりました。