星期四, 9月 09, 2010

CSS之Selector

以為把W3C School CSS看完, 而且考試考了95分, 就可以直接上寫幹活了. 結果才寫幾行就卡住又要查資料了. 問題在我的HTML長的像


<ul>
 <li></li>
 <li></li>
</ul>


我不想把所有li的屬性都改掉, 但我又不知道要怎麼用CSS selector去選id是userinfo裡的ul tag裡的li tag. 只好查資料囉. 最好的來源自然是w3.org囉.
  1. Grouping
    h1 {xxxxx}
    h2 {xxxxx}
    h3 {xxxxx}
    跟h1, h2, h3 {xxxxx}是一樣的. 逗號隔開代表同時指定這幾種tag的style. 
  2. Universal selector
    *, 代表任何一種在document tree裡的element. 
  3. Type selectors
    這種最基本了, 任何一個HTML定義的基本tag.
    h1 {xxxx} 
  4. Descendant selectors
    跟Grouping語法很像, 只是不用逗號, 改用空格.
    h1 {color: red}
    em {color: red}
    h1 em {color: blue}





    This is h1 here is em this is h1 again


    會顯示成This is h1 here is em this is h1 again
  5. Descendant selectors
    div * p代表div裡, 不管多深的p tag. 
  6. Child selectors
    body > p {line-height: 1.3}
    代表body裡的第一層p child. 跟Descendant selectors很像, 差別是用>只會選到它的第一層直接child.
  7. Adjacent sibling selectors
    這個一定很少用, 所以大多文章都沒有介紹到.
    h1 + h2 {margin-top: -5mm}
    代表選h1之後的第一個h2 tag.
    h1.opener + h2 {margin-top: -5mm}
    代表class是opener的h1 tag下的第一個h2 tag.
  8. Attribute selectors
    [att], 所有有這個att的tag
    [att = val], 所有att值是val的tag
    [att ~= val], 所有att值與val相近的tag
    [att |= val], ??
    ex. span[hello="Cleveland"][goodbye="Columbus"] (att可以有很多個串起來)

沒有留言: