優化之道p.238 選擇器的種類
global selector: *
type selector: h1
class selector: p.note, .note (選擇class屬於note的p)
id selector: #nav
child selector: li>a (選擇身為li的小孩的a)
descendant selector: li a (選擇身為li的子孫的a)
adjacent sibling selector: h1+p (The selector matches if E1 and E2 share the same parent in the document tree and h1 immediately precedes p, ignoring non-element nodes (such as text nodes and comments). If this is the case, select that p.)
general sibling selector:h1~p (選取和h1有相同父元素的所有p)
NOTE:
*[lang=fr] and [lang=fr] are equivalent.
*.warning and .warning are equivalent.
*#myid and #myid are equivalent.
關鍵想法: 把h1+p, h1~p等等想成跟regular expression一樣,背後有一個解譯器在運作,只要regular expression合乎語法,解譯器就能按照你的意思去運作。 (我自己是這樣想啦)
優化之道p.239 優先權
如果兩個選擇器相同的話,後者優先
如果一個選擇器較其他選擇器更具指定性,較具指定性規則會凌駕一般性的選擇器。 ex. p b > p, h1 > *
可以在任何屬性值後面加上!important,來表示此規則有最高優先權。
優化之道p.239 繼承
有些屬性會繼承給子孫元素
可以在屬性中用inherit來強迫繼承父元素的屬性值
CSS將每個HTML元素視為獨立的方框。這個方框若非「區塊」方框,就是「行內」方框(block and inline)
沒有留言:
張貼留言