Selector – 選取器

CSS要寫得好,一定要有很好的階層概念,這樣才不會迷路。當你的網頁當中有很多樣式名稱重複的時候,就要依賴具備階層概念的選取方式來選到你要的元件。

我是個不喜歡把id當成選取標的的人,並不是因為選id不好,而是習慣問題。基本上,我喜歡把id保留給工程師用,因為使用Ajax和Javascript,往往需要去指定標籤元件的id,如果你把它用掉了,常常會讓工程師變得很麻煩。

可是,光靠class name來選,往往會下一堆有的沒有的 class name,這時候如果你懂得善用選取器,就可以減少很多命名的動作,下面這個是W3C所列舉出來的CSS2選取器:

語法 意義
* 所有元素
E 所有 E 元素
E F 所有在 E 裡面的 F 元素,不分層級
E > F 所有接在 E 後面的 F 元素,也就是 E 所有的 F 子元素(孫字輩的就不能算喔)
E:first-child 所有 E 的子元素,不管它是誰
E:link
E:visited
這是連結的擬態類別,E:link是 E 沒有被點選的狀態,E:visited則是E被點過的狀態
E:active
E:hover
E:focus
也是擬態類別,E:active 是 E 正在被點的狀態,E:hover 則是E在滑鼠移上去的狀態。E:focus則是變成滑鼠焦點時的狀態,用在輸入框那種東西上很好用,中風IE6沒用
E:lang(c) 如果你有指定語言的習慣,那就更好了,因為你也可以依照語系來選取物件,比如說E:lang(en)就可以把E元素且lang屬性為en的東西加上國旗之類的小圖
E + F 接在E元件下面的鄰居F,注意,他是鄰居(當成兄弟也可以),反正沒有繼承的關係
E[foo] 含有foo屬性的E元件,舉個例來講,你可以把含有disable屬性的標籤給隱藏起來。
E[foo=”warning”] 剛剛那個選屬性,這個就是「指定」只要選「屬性=多少」的標籤,例如選取A[href=”#” mce_href=”#”],就是把href=”#” mce_href=”#”的連結標籤都給選出來
E[foo~=”warning”] 有的屬性裡面的值可以疊加,就像class=”name1 name2 name3″,這個方式就是選出foo屬性當中任何一個由空白隔開的值=warning的標籤
E[lang|=”en”] 語系值會有連字號,例如zh-tw、zh-cn,選取器可以把連字號當成比對依據,從左邊開始比對每個連字號分出來的字,只要符合就選出來
DIV.warning 一般的class name選取方式,這種寫法,是特別針對class name為warning的div標籤來選取,如果你不想只針對單一標籤的話,可以使用.warning來選取所有class name為”warning”的網頁元素
E#myid id選取器,選取E標籤且class name為myid的元素,基本上,你也可以不要使用E,單單使用#myid,不指定標籤的方式來選取該元素,但是,這種行為有脫褲子放屁的嫌疑,因為單一一個網頁上面,id必須為唯一值,如果你把它當成class name套動到多個標籤上面,是不正確的作法。

感覺上,這真是太好用了!不過這是些選取器根據本人實驗的結果,裡面有80%在中風老人IE6身上完全不能夠支援,到底有哪幾種不能支援呢?CSS testing of Selector and Pseudo selectors 這篇文章整理得很清楚,請大家有空自己去看,不過看完以後,我的結論是:

IE6你是殘障瀏覽器嗎?

這篇好隨便,一點內容也沒有,我在幹嘛…..XD

非常感謝chph的補充說明,我也修正了先前不太嚴謹的說明內容,免得誤導哩~ 再次證明,我這篇真是邊寫邊睡…

3 thoughts on “Selector – 選取器

  1. 一般的class選取法應是 .className
    格主所寫的 DIV.warning,是將 .warning侷限在 div元素上,意即若將.warning套用在 p 上,就不會生效。

    下方的E#myid亦是如此。

  2. 其實css 的選擇器真的很好用

    尤其是 E[foo=”warning”]

    在做表單真的好用到不行

    之前有分想過一個 ie7.js 的程式
    導入後可以讓中風 ie6 穫得康覆的機會
    您可以試試

    另外最近發現 jquery 支援的 css 選取器也不錯用
    有空玩看看

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s