CSS 覆寫屬性的規則

之前我都很蠢地在最上層用 <div id='content'> 包住所有內容, 然後在 css 裡寫 #content div { ... } 定基本共通的屬性。結果當 <div id='content'> 裡面需要用某個特別的 div 時, 怎麼設都無法取代之前設的屬性。我以為後寫的會覆蓋先寫的 (last match), 但看來又不全然如此。今天查了一下, 看到這篇說愈明確的 css selector 的優先權愈高。

於是改用 <div class='content'> 和 .content div { ... } 後就解決了。之後要在內部改變 div 屬性時, 萬一怎麼都搞不定, 至少用 id 可以蓋過去。難怪看到 jQuery UI 裡都用一堆 class, 沒事還是別用 id 設 css, 之後再來找時間研究一下較好的配套作法。