CSS 選取項

今天開始第一篇關於 CSS 的筆記
以前在資策會上課時 CSS 都被快速帶過
感覺好像不是很重要而且感覺好像很簡單一樣
不會只要上網查答案就好了
後來在參加過 RGBA 後才發現，原來根本不是想像中那樣
如果沒學好，亂寫、Google在複製貼上的話
未來寫好的網頁一定會有問題
不是個瀏覽器打開時畫面不一致、更有可能會跑板

後來聽了 Even Wu 的建議
如果要當一個 UI/UX 設計師
最起碼的基本功一定要先打穩
所以 CSS 是必定要學好的第一步
於是他就推薦了我一本 "CSS大全 第三版"

而下面就是我的第一篇重點摘論：第二章 選取項

============================================================
"[ ]"  通常指向特定的組件
" : "  擬類型或擬組件 ex: a:link, a:visited, a:hover, a:active, a:focus
       (組件發生特定事件時 ex: 在比賽時, 當主場球隊得分時, 觀眾就會歡呼。
   我們無法預測地主隊何時得分, 但當得分時,確定觀眾就會歡呼。)

    也就是無法精確掌握原因發生的時機, 但並不會影響對結果的預測 

============================================================

Mercury

要抓到 class 可以用:

.barren{ color:Blue; }
.rocky{ color:Blue; }
.rocky.barren{ color:Blue; }
.barren.rocky{ color:Blue; }
planet.barren{ color:Blue; }
planet.rocky{ color:Blue; }
planet.rocky.barren{ color:Blue; }
planet.barren.rocky{ color:Blue; }

p[class ~= barren]{ color:Blue; }   
    /* 這種前提是有 "空格" => barren + space + rocky */
p[class ~= rocky]{ color:Blue; }

============================================================

span[class ~= "bar"]{ color:Blue; } 
class 的字串中有空格 "並且" 有完整字串為 "bar"
(span[class ~= "ba"] 就會找不到!!!!!!!!!!!) 很容易忽略掉 ~~~~~~~~~~~~~~~

span[class |= "bar"]{ color:Blue; } 
class 的 "起始" 字串為 bar

span[class ^= "bar"]{ color:Blue; } 
class 的 "起始" 字串為 bar

span[class $= "y"]{ color:Blue; } 
class 的 "結束" 字串為 y

span[class *= "bar"]{ color:Blue; }  ex: a[href *= "falLife.com"]{ font-weight:bold; } 
class 只要有包含字串為 bar

*[lang |= "en"]{ color:Blue; }       
[attr |= "value"] figure-1.jpg, figure-2.jpg, figure-3.jpg ......
lang 語系開頭 "起始" 字串為 "en"  
        ex: img[src |= "figure"]{ border:1px solid red; }

============================================================

ul em{ color:Blue; }
ul 所有的 "後代" 裡, 只要有包含 em 的
       (也就是裡面有可能是好幾代以後的組件, 全部都會包含)

ul > em{ color:Blue; }
ul 的 "子代" 裡是 em 的(只有一層關係而已!!!!!!!!!!)

table + ul{ color:Blue; }
跟 table 是"兄弟關係"(同一層), 並且 "緊鄰" 於 table 後的組件
兩者必定要是 
1.兄弟關係 
2.後者 "緊鄰" 於前者

li + li{ color:Blue; }
這是特例, 所有 body 文件裡面的 "所有li" 都會被選取到(除了所有 li 的第一個項         目以外, 縱使不同層、不是兄弟關係也一樣!!!!!!!!!!!!!!)

============================================================

擬類型
超鏈結類型:
:link    任何鏈睫錨點, 並指向為瀏覽的網址
:visited 指向已鏈結的錨點

動態擬鏈結:
:hover   游標移至超連結時
:active  目標物件有動作時(按住鏈結且不放時)
:focus   身為網頁焦點組件時

擬組件:
首項子代組件:
p:first-child  指 body 文件中的第一個
              (常會搞錯成 的下一層的"第一個子代組 件!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!)

語系選取組件:
*:lang(en){ color:Blue; }
雖然跟 *[lang |= "en"] 有相同作用
但 "*" 的語系資訊可以從許多資料來源取得, 有些來源可能不在組件內
                       (所以在語系選取時最好用 *:lang(en)

首字字樣:
p:first-letter{ color:Blue; }
裡的第一個字母變藍色

首行樣式:
p:first-line{ color:Blue; }
裡的第一行子變為藍色
p:first-line em{ color:Black;} wrong!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
擬組件出現在em 前面是錯誤的, 因為只能出現在選取項的最末尾

前後組樣式:
h1:before{ content: "["; color:Red; }
h1:after{ content: "The End."; color:Red; }
============================================================
以往看的程式書籍不多
再加上心想 CSS 應該不會太難
所以以為這一本應該不會太艱澀
結果......超多字的......
如果跟我一樣是初學者的讀起來可能會有點痛苦
不過他寫得真的很棒!

- SC