というか、自分が勘違いしていた点。はい、すいません、勉強します。
その１ : セミコロンは必須じゃない
.hoge { font-weight:bold; }
こんな感じで記述する場合、宣言が単数でも後ろにはセミコロンを付けるべきものだと思っていた。
けど、セミコロンは複数の宣言を区切る場合に使うものなので、記述しなくても良い。
.hoge { font-weight:bold }
こんな感じで。つまり、宣言が複数の場合はこんな感じで書いても良いらしい。
.hoge {
font-weight:bold;
font-size:150%
}
この辺、参照
http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#declaration
プログラム書いてる人間的には、区切り文字がカンマだったら最後の要素の後ろに付いてると不自然に感じるけど、セミコロンだと最後も付いてないと不自然に見える気がする。
その２ : 重複宣言するとオーバライドされそうな気がする
.hoge { font-weight:bold }
.hoge { font-size:150% }
こう書いた場合に、1個目の宣言（boldの方）が上書きされて、2個目の宣言（size:150%）の方だけが有効になるような気がする。
けど、CSSはこう書いた場合、1個目の内容と2個目の内容、両方が適用される。
Rubyでいうと、class内のメソッドを上書きしているような印象を持ってしまったのだけど、hashに対して処理してるイメージで捉えた方が良いようで。
こういうイメージじゃなくて
class Hoge
def hoge
puts "font-weight:bold"
end
def hoge
puts "font-size:150%"
end
end
Hoge.new.hoge
# => font-size:130%
こういうイメージ
hoge = Hash.new
hoge["font-weight"] = "bold"
hoge["font-size"] = "150%"
その３ : 隣接兄弟セレクタを理解するのに手間取る
小セレクタは見た瞬間に理解できるけど、隣接兄弟セレクタはちゃんと説明を聞かないと分からなかった。
子セレクタはこんな感じのヤツ
body > div { margin-top : 0pt }
<body><div>この辺に適用される</div></body>
で、隣接兄弟セレクタはどんなのかというと、こんなの。
h1 + h2 { margin-top : 0pt }
<h1>これと</h1>
<h2>これのように隣り合った場合に適用される</h2>
<h2>これは隣り合ってないから適用されない</h2>
子要素という概念は比較的よく目にするけど、隣接要素という考えを持つことってプログラム書いてる上では少ない気がする。
でも、この隣接兄弟セレクタ、本名（英語）は「Adjacent sibling selectors」という。siblingと言われるとXML使い的には「あー、そういうことか」と思えた。というか、最初から英語見るようにしないとなぁ。