Posted by : Dylandy Chang 2013年8月21日 星期三

上一次我們談到了如何簡單的生成一個網頁文件,但是我們卻只能單調的對這個文件進行打字,以往我們在編輯文件的時候, 常常有許多的格式設定需要我們去煩惱,這些格式的設定在網頁上即是使用 CSS 來進行設定,為了對某個我們已經生成的物件進行設定, 我們需要先了解到如何對物件進行選擇,即是學習 CSS 選擇器。


在學習選擇器之前先聊聊幾個基本概念,如果有學過物件導向程式設計的朋友們應該對於「class」和「id」並不陌生, 「class」和「id」的概念在 CSS 的應用上是非常常見的,若是我們想要對於一群物件進行設定,而這些物件卻是不連續的出現在我們整份文件中, 那麼我們可以對這些我們欲設定的物件使用相同的「class」名稱,我們只要對這個「class」進行設定即可;相對於「class」的多個物件共用屬性, 「id」就是個別的一種屬性設定,我們在使用「id」的時候只能在同一份文件中出現一次,如果出現多次會造成混淆的現象。

舉例來說明 class 和 id 的關係就像是在每個人身上貼上標籤,台灣有 200 多萬個台北人,但是台北人中卻只有一個人的身份證字號跟你一樣,那個人就是你自己。

【註】class 以小數點「.」為開頭; id 以 Hash Tag 「#」為開頭


以下就要來一個一個的講解有關於 CSS 選擇器的內容了,上面廢話有點多orz


根據 w3c 的 css selector syntex,我們可以知道 CSS 選擇器大約有 10 種

Universal Selector 通用選擇器

使用 * 作為篩檢對象,代表此網頁下所有的物件都遵守 *{} 裡的規則。

Type Selector 屬性選擇器

使用 Html Tag 作為篩檢對象的方法,稱作為屬性選擇器,屬性選擇器會把這份 HTML 文件中所有被選擇到的那種標籤都加上所設定的規則。
          h4{
            font-size:20px;
           }
div{ background-color:black; }

Descendant Selector後代選擇器

當兩個選擇器並排呈現的時候,瀏覽器會從外面往裏面選擇,可以當作是被限制範圍的其他選擇器,相同的只要符合選擇器所篩選的內容都會被套用這些規則。
例如:

住在台北市的人 男生

這兩個篩選條件下的交集,會有很多的結果,這些結果都會套用我們所下的規則。
          div a{
            color:yellow;
          }
          nav li{
            color:red;
          }
       

Child Selector 子選擇器

子選擇器的意味和後代選擇器很類似,但是後代選擇器是對每個後代都作用,但是子選擇器只對緊緊跟在前一個選擇器後面那個作用,若是中間有其他的物件在中間, 那麼就不會套用選擇器的屬性,所以範圍更小了。
例如:

坐在我附近的人 > 男生

在這個條件下,坐在我附近的人中可能有很多個男生,但是坐在我旁邊的男生可能只有兩個人,那麼 這個選擇器的條件就是選擇到這兩個男生,並對他們進行屬性上的設定。
           div > a{
              color:yellow;
           }
        

Adjacent sibling selectors 相鄰選擇器

相鄰選擇器,應該是目前很少用到的一種選擇器,因為尚有部份瀏覽器不支援,我們都知道 HTML 的具有巢狀結構,而前面所提到的後代選擇器和子代選擇器, 都是針對巢狀結構的內層作用,而相鄰選擇器,則是針對同一層的其他元素進行作用,其中使用 + 來進行連接。
            h1+h1{
             color:red;
            }
            /*同層的的第二個 h1 會顯示紅色*/
            h1+h1+h1{
             color:blue;
            }
            /*同層的第三個 h1 會顯示藍色*/
          

Attribute selectors 屬性選擇器

屬性選擇器,是針對標籤裡頭的屬性做更進一步的修改。這個比較難解釋,直接看 code。
            h1[class]{
                color:red;
            }
           /*所有含有 class 屬性的 h1 都會受到影響*/
            h1[class=title]{
               color:red;
            }
           /*所有 class 屬性為 title 這個 class 者都會受到影響*/
           h1[class~=title]{
               color:red;
           }
           /*所有 class 屬性有 title 者都會受到影響*/
           h1[class|=title]{
               color:red;
           }
           /*class 的第一個為 title 者會受到影響*/
         

Class Selector

顧名思義,針對某個 class 進行定義屬性的方式,以 . 為開頭進行定義。
            .box{
               background-color:black;
            }
         

ID Selector

和 Class 選擇器類似,但是指針對某個特定的 ID 進行定義,使用 # 為開頭進行定義。
            #key{
              color:white;
            }
         

Pseudo-classes 偽類

這個東西嘛,其實就是常見的 :hover :active :visited :link 除了常見的這些之外,還有其他三個 :first-child :focus :lang
          p:first-child{
            color:red
          }
         /*first-child 是第一個使用 p 這個標籤者會被設定屬性*/
         p:lang(fr){
           color:red;
         }
        /*符合屬性為 lang(fr) 的標籤才會被套用這個屬性*/
       

Pseudo-elements 偽元素

偽元素的使用和偽類的使用方法類似,皆是使用冒號接上元素名稱。目前偽元素有兩個 :first-letter :first-line
          p:first-line{
            color:red;
          }
          /*第1行 p 會成為紅色*/

          p:first-letter{
            color:red;
          }
          /*只有第一個字母會變成紅色*/
       


以上就是 CSS 選擇器的教學,如果有任何問題的話,歡迎提出問題一起討論。

Leave a Reply

Subscribe to Posts | Subscribe to Comments

技術提供:Blogger.

- Copyright © 迪蘭帝的聊天室 -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -