iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 13
0

介紹了基礎的選擇器,以及進階用組合子的方式選擇。今天我們要來介紹更近一步的選擇器應用,偽類與偽元素。

偽類 Pseuedo-classes

偽類之所以叫作偽,簡單來說它的選擇器所選的不是真正存在的類別(class屬性值),它的選擇符為冒號,它可以用來幫元素的“狀態”套樣式,或是用順序來指定元素等,通常在基本選擇器或是組合方式的選擇器無法選到、或選擇起來不夠方便時,就會用到偽類。很多時候使用偽類,可以省下幫很多元素做class的命名。

The Link History Pseudo-classes

超連結的偽類:任何有超連結性值的元素可以用這個偽類,來設定狀態的樣式,也就是會用到href屬性的元素,比如<a>

a:link { 
  color: green; 
}

a:visited { 
  color: red; 
}
  • :link 元素尚未被訪問的狀態。

  • :visited 元素已被訪問的狀態。

    Try it on codepen.

    如果還沒點顏色就已經是訪問過的,可能是你的瀏覽器記錄到曾經訪問過該網站,就會顯示已被訪問的狀態,但過一段時間,就會自動回到未被訪問的狀態。

User Action Pseudo-classes

使用者互動虛擬類別:用來跟使用者互動的元素,可以用這個虛擬類別,來設定狀態的樣式。像是<button><input><a>

button:hover {
    color: red;
}

button:active {
    color: blue;
}

input:focus {
  border-color: red;
}
  • :hover 滑鼠指標滑到該元素上頭時的狀態。

  • :active 元素被觸發時的狀態,比如滑鼠按下的那一刻或用右鍵按下鎖定該元素時。

  • :focus 被鍵盤輸入鎖定的元素狀態。

Try it on codepen.

Tree-Structural pseudo-classes

文檔結構偽類:這類的偽類奠基在html文檔的結構,所以如果文檔的結構改變的話,樣式也會跑掉變成自己不樂見的狀況。所以通來常說,它比較適合用在網站結構較固定的部分。

  • 最固定的結構是根元素偽類 :root,它所對應到的就是<html>元素。

      :root {
      	color: red;
      }
    
      html {
      	color: red
      }
    

    兩個選擇器所做的樣式宣告,都會顯示同一個結果—讓整個文件的字都是紅色的。差別在於它們的權重不一樣,上列所述的語法,雖然html寫在後面,可是 :root的權重比較高,所以最後樣式會套紅色的字。(權重這個概念會在之後提到)

  • :nth-child() 兄弟結構偽類,雖然它有child這個詞,但並不是作用在子元素,而會以該元素的所有兄弟元素為目標,並依括號內的數值來選定特定的序列。這可以省下幫一個一個元素寫入的class屬性,而改以具結構規則性的方式選取。它特別適合用在有順序特性的文檔結構,像是表格<table>或是清單<ul><ol>

    1. 用奇數偶數來選擇:

      • html:建立一個簡單的表格(五列二欄)

        <table>
          <tr><td>奇數列</td><td>奇數列</td></tr>
          <tr><td>偶數列</td><td>偶數列</td></tr>
          <tr><td>奇數列</td><td>奇數列</td></tr>
          <tr><td>偶數列</td><td>偶數列</td></tr>
          <tr><td>奇數列</td><td>奇數列</td></tr>
        </table>
        
      • css:選擇同一層級的<tr>元素們,並將奇數列及偶數列套不同樣式。

        tr:nth-child(even) {
          background-color: orange;
          color: white;
        }
        
        tr:nth-child(odd) {
            background-color: lightgray;
            color: dark;
        }
        
      • 渲染結果

    2. 直接指定單一數列:

      • css

        tr:nth-child(1) {
            background-color: orange;
        }
        
      • 渲染結果

    3. 用算式來選擇 :nth=child(an+b)

      a與b都是可以自訂的數字,n則是數列,n會從第0列開始遞增運算,如果我們想要每三列的第一列被套用樣式的話,那就是 :nth-child(3n+1)

      • css

        tr:nth-child(3n+1) {     
        	background-color: yellow; 
        }
        
      • 渲染結果

      大家可以練習每四列的第二列、每五列的倒數第二列套樣式,該用怎樣的算式。Try it on codepen.

見更多的Pseuedo-classes偽類

Pseudo-elements 偽元素

偽元素跟偽類的差異在於,偽類是基於真實存在的元素去選取不存在的class ; 而偽類則是基於存在的元素,創出一個虛擬的元素。它的選擇符是::雙冒號。

  • ::before 在元素前創偽元素

    • html

      <p>我是文檔內真實存在的\<p>元素</p>
      
    • css 在<p>前面創一個偽元素,用content屬性(property)宣告它的內容。

      p::before {
        content: "我是偽元素";
        color: red;
      }
      
    • 渲染結果

  • ::after 在元素後創偽元素

    • css

      p::after {
        content: "我是偽元素";
        color: red;
      }
      
    • 渲染結果

見更多Pseudo-elements偽元素

選擇器混合使用

來到了選擇器筆記的尾聲,是否有點 鬆一口氣 感傷?選擇器是很有趣的,它的作用很強大,會越用越發現它的奧妙,講了那麼多的選擇器,它們也可以混在一起使用,當然它們各自的規則不能互相衝突,否則整個樣式聲明就會無效。多多練習就會跟它們越來越麻吉了~

像是 header>.menu a ~ a::after,它選到的是在<header>元素內的class值為menu的元素內的第一個<a>之後的每個同層級<a>後方創的偽元素。有點饒舌,但就練習看看吧!← 不負責任結尾(挖鼻屎...)

  • 好啦,結果會是這樣:

    Try it on codepen.

選擇器筆記告一段落了,接下來將介紹不斷提到的「權重」,那就明天見囉~/images/emoticon/emoticon41.gif

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day12 CSS selector (2)
下一篇
Day14 CSS:權重
系列文
從門外漢到前端新手30

1 則留言

0
letter liu
iT邦新手 5 級 ‧ 2019-09-28 12:25:16

學習了 感謝

JinWen iT邦新手 5 級‧ 2019-09-29 11:34:49 檢舉

/images/emoticon/emoticon25.gif

我要留言

立即登入留言