原帖由 super-hing 於 2007-4-20 11:52 PM 發表
分別就係
1.
<style type="text/css">
div
p {background-color: blue}
h2 {background-color: green}
p {background-color: red}
</style>
有出現 "RED BLUE GREEN"三種色.
2.
<style type="text/css">
div p {background-color: blue}
div h2 {background-color: green}
div p {background-color: red}
</style>
呢個就只有RED AND GREEN 2 種色...
=================================================
但係點解 方法2 , 只係出現左2種 COLOR 呢?
H2 就無問題, 唔通 <P> 混淆 左?
CSS 既其中一個特性﹐就係後面既 style 係會取代之前既 style。 所以在方法 2﹐您咪見到有兩個 "div p" 既? 最後果個 red 就 override 左之前既 green 勒。 即係好似 programming 中 variable 咁﹐當您 assign 個新 value 入個 variable﹐佢就洗左之前既 value 勒。
咁睇返第一個: 其實係有三個不同既 elements 架喎: "div p", "h2", "p"。 而您睇返 HTML﹐您就見到有 一個 < h2> 響 < div> 入面﹐一個 < p> 響 < div> 入面﹐另一個 < p> 響 < div> 外面。
至於第二個方法﹐其實只係有兩個 elements: "h2", "div p"。 因為我無列明兩個唔同 "scope" 既 < p> 用唔同 styles ﹐只係講左 "div p" 就用 red (記得﹐green 唔計﹐因為 green 係舊 value)﹐所以所有 < p> 都用晒同一個 style (red) 勒。