[鐵人賽05] 從平面設計前進 CSS-3 選擇器詳解


上一篇提到要套用樣式,就需要指定某一個特定的元素E 告訴瀏覽器,我就是要把樣式套在這個 E 上面,就像我們作圖時先找出要做特效的圖層然後套用特效一樣。

這個指定元素的部分我們叫做 “選擇器”,也就是利用這個地方來指定特定的元素,其實就是不同的選出元素的方法。
(有點像在教室裡叫第一排站起來,或全部的女生站起來,也許更像在:玩大風吹、吹什麼~ 吹我叫到的元素 E )

選擇器可分成下表裡的類別,看得懂英文的可以直接參考 w3c的 selector說明頁(註1):
除了”全域”、”型態”及最常見的.class, #ID之外,有幾個是類似的選擇法 繼承 偽類 參數

繼承:有分成祖先、父親、E本身、兄弟、子代、後代,利用元素間的空白及+ < 符號來做不同的指定
偽類:就是下表那些用了 :link, :hover 的選法,因為實際上並沒有哪個元素叫做:hover 多半是選擇正在被動作或是某種狀態下的元素,實際上正在做操作的元素也不會是固定的,所以這類型的選擇法叫做 偽類選擇器。
參數:這個大類是用 [] 包起來的,E[類別=值],例如 a[href=”http:chibc.net”],就會選出 <a href=”http://chibc.net”> tag<a>的對外連結剛好是連到http://chibc.net的<a> 其他的 <a> 就不會被影响到。

而且選擇器是可以串連並混合運用的,例如:

div.classA p{}
選出 樣式為.classA的div 後代裡的p

div .classA p{}
選出 div 的後代裡叫做 .classA的元素 的後代裡的 p
注意這裡有空格就變成後代選擇器,而不是指同一個元素囉~
沒有空格直接連在一起的是指同一個元素,空格了就變成後代選擇器了。

ul li:first-child{}
選出 ul 後代裡面的是自己父元素的第一個li

同時也可以針對不同的元素指定相同的樣式內容,只要在選擇器之間加上 , 就行了。例如:

h1 ,h2 ,h3{}
就可以將標題一、標題二、標題三都套上在 {}裡的樣式

模式 解釋 類型
* 選擇所有的元素
E 選擇叫做這個名字的 tag (例, img {} 選擇所有的<img> ). 型態選擇器
F E 選出元素 F 後代中的 E 繼承-後代選擇器
F > E 選出 F 的第一代子元素 E 繼承-子代選擇器
E:first-child 選出 在同一個父元素裡是長子的 E :first-child 偽類選擇器
E:link
E:visited
選出 元素E 中有連結(:link)的或是曾被造訪過的(:visited) 連結偽類選擇器
E:active
E:hover
E:focus
選出 正處於某種使用者行為時的 E,例如E:active 是正被作用的E,E:hover是正被滑鼠移過的E 動態偽類選擇器
E:lang(c) 選出 在某種語言下的E,例如E:lang(zh) 就會在文件被定義為中文時呈現樣式的效果。 語言偽類選擇器
E2 + E1 選出 緊接著E2但是和E2在同一代 的E1 相鄰選擇器
E[foo] 選出 任何有foo類型的 E,不論foo的值是什麼 參數選擇器
E[foo="warning"] 選出 foo參數值正好是 warining的E 參數選擇器
E[foo~="warning"] 選出 E ,具有foo類型,而且foo對應許多參數值,其中有包括 warining 參數選擇器
E[lang|="en"] 選出E ,他的語言參數值裡其中一個是en 參數選擇器
DIV.warning 自行取名的樣式 (在HTML裡也可以表示為DIV[class~="warning"].) 樣式選擇器
E#myid 選出 ID等於 myid的元素 ID 選擇器

雖然在CSS裡提供了如此多選出元素的方法,不過一般教學都還是習慣從 .class 及 #ID教起,這兩個是自己取名的樣式,可以幫助你理解你創造的樣式內容為何,所以取名時要注意語義性,最好依HTML內容的結構功能來取名,這樣未來維護時會方便很多,千萬別用DW裡預設的style1, sytle2….這樣到時候要改你就很難找到自己想要修正的樣式了。

====
註1:
http://www.w3.org
W3C是制定現行網頁標準化的一個團體,在web2.0時因為有些瀏覽器廠商沒有加入標準化制定的行列,所以早期瀏覽器在解讀HTML及CSS時常會有不同的呈現(尤其是IE),所幸在2012的現在,各家廠商都有參加新的W3C標準制定,包括所謂的HTML5及CSS3。這在未來會減少一些跨瀏覽器創作網頁的困擾,不過舊版本的瀏覽器還是或多或少的被使用著,網頁作者可依目標群的瀏覽器佔有率來決定要不要向下支援較舊版的瀏覽器。


About chibc

chibc《暗月之鏡》 從高中網路開始普及就開始成為重度網路使用者,早期主要活動集中於巴哈姆特。
G+ CHIBC

看完有什麼想和版主講的,沒有就留個「閱」吧

This site uses Akismet to reduce spam. Learn how your comment data is processed.