スタイルシート 継承？？

質問

以下のスタイルシートで質問が３点あります。

(1) * {} は、何を表して、どこに影響を与えるのでしょうか？
(2) h2#testは、上のh2の属性を継承し、font-sizeだけ上書きしています。
　 継承させない方法はあるのでしょうか？
(3) 最後の#sample ul li img は４つ並んでいますが、これをする意味が知りたいです。
　 優先順位など規則があるのでしょうか？

* {
margin:0px;
padding:0px;
}

body{
color: blue;
background: red;
}

h2 {
margin:10px;
padding:10px;
font-size: 20px;
color: yellow;
background: blue;
}

h2#test {
font-size: 10px;

}

#sample ul li img {
height:12px;
margin-right:5px;
}

回答No.4

kyotokyo

(1) * {} は、何を表して、どこに影響を与えるのでしょうか？
すべてのタグに影響を与えます。

(2) h2#testは、上のh2の属性を継承し、font-sizeだけ上書きしています。
　 継承させない方法はあるのでしょうか？
継承させない場合、すでに書かれていますが
margin、padding、font-size、background-colorをリセットする必要があります。

(3) 最後の#sample ul li img は４つ並んでいますが、これをする意味が知りたいです。
スペースで要素を区切ると、子孫要素にしか適用されないということになります。
つまり、IDが#sampleの中にある、ulの中にある、liの中にあるimg要素にCSSが適用されます。

回答No.3

abril

No.1です。補足です。
ちなみに、

> (2) h2#testは、上のh2の属性を継承し、font-sizeだけ上書きしています。

とありますが、実はh2からh2#testへ継承しているプロパティの値は"font-size: 20px;"と"color: yellow;"のみで、残りのmargin、padding、backgroundは「継承」はされないプロパティです。ここの概念、もしも質問者様がまだCSSに関してビギナーの方でしたらちょっと混乱するかもしれませんが…
【参考】http://oshiete1.goo.ne.jp/qa4716773.html

回答No.2

sh_hirose

(1)全てのタグという意味
*のみはベースとなるCSSの一番上に書きます。
div * {
margin: 10px;
}
このように書くとdiv内部の全てのタグにだけマージンが適用されます。

(2)h2のスタイルを使用したくないものは全て上書きしないといけないと思う。
h2#test {
margin: 0px;
padding: 0px;
color:#000000;
background: none;
}

(3)#testのidの内部のul内部のli内部のimgタグという意味
<div id="test"> ←適用されない
<ul> ←適用されない
<li><img src="...gif" alt=""></li> ←適用される
<li>test</li> ←適用されない
</ul>
</div>

回答No.1

abril

(1)
「全称セレクタ」というもので、全ての要素に対して{}内のスタイルが適用されます。

(2)
CSSとは、その名の示す通りCascading（段階的に継承していく）する事が特徴です。
なので（本来継承する様なセレクタ・プロパティのものを）継承させない、という事はできません。
上書きをする事で対応するか、セレクタの設定の仕方を予めよく考えて工夫するか、何れかの対処が必要です。

(3)
セレクタの書き方によって詳細度というものが異なりますので、その値が大きいセレクタほど優先順位が高くなります。
【参考】http://w3g.jp/css/guide/cascading_order

上記サンプルの意味ですが、CSSの全体構造と制作者のポリシーがわからないのではっきりした事は言えません。
詳細度を意識した上で「そのセレクタで書かなければ適用されない」スタイルがあるのかもしれませんし、単に"#sample img"というセレクタでも意図したスタイルが適用されるけれども、HTML側の構造と連動して”段階的に明示しておきたい”という意味で細かく記述しているのかもしれませんし。