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可以有很多個串起來)