iT邦幫忙

2021 iThome 鐵人賽

DAY 9
1
Modern Web

入門前端技能之旅系列 第 9

Day.9 「我實際不存在 DOM 裡~」 —— CSS 偽類選擇器(Pseudo classes) 與 偽元素(Pseudo element)

「我實際不存在 DOM 裡~」 —— CSS 偽類選擇器(Pseudo classes) 與 偽元素(Pseudo element)

為什麼會有個「偽」字呢?

偽(Pseudo)這個意思有虛幻虛無的意思,類選擇器是用來處理 DOM 操作不了選擇器,偽元素則是原本並沒有在 HTML DOM 中,是透過 CSS 創造出來的元素。

什麼是偽類選擇器(Pseudo classes)?

前面篇章有提到 CSS 選擇器,通常都能單獨使用,而偽類選擇器比較特別,他必須搭配其他選擇器來使用,我們常使用的操作型偽類觸發條件前,一切都是假的!平時並不會有效果,最常見的範例就是<a>標籤。

偽類選擇器

這邊將舉出最常見的偽類選擇器與使用方法,還有許多偽類選擇器可以查看 MDN 官方文件
使用方法需在前面加:前綴,以<a>標籤作為範例:a:hover { css... }

操作型偽類

  • :hover,當游標懸浮在元素上時,產生效果,最常見的使用方式。

    游標懸浮在我上面,我顏色會變

  • :active,當游標對著元素壓住時,產生效果,通常使用在按鈕類型的元件。

  • :focus,當元素是焦點狀態時,產生效果,通常都是使用在<input>輸入框。

結構型偽類

  • :nth-child(),會根據()條件,影響同級元素樣式的偽類,通常使用在清單、表格這類有規律性的結構做變化。以下範例綠色為有修改樣式,紅色為未修改樣式
    • (3),代表同級元素第三個做樣式。
      nth-child(3)
    • (odd),代表同級元素中的基數列做樣式。
      nth-child(odd)
    • (even)代表同級元素中的偶數列做樣式。
      nth-child(even)
    • (3n + 1),代表每 3 個為一組,每組第 1 個做樣式,n 的起始值為 0 。
      nth-child(3n + 1)

什麼是偽元素(Pseudo element)?

偽元素就更妙了,原本 HTML 結構上沒有,但利用偽元素憑空造出一個虛幻的元素,在開發者模式下,只看到::before::after,到底有還沒有,偽元素的好處就是讓 HTML 結構更加簡單清楚,還感覺自己更厲害了
Pseudo element

偽元素

這邊就舉最常用的兩個偽元素,通常偽元素的使用實際是想讓 HTML 結構更簡單,避免太多無意義的標籤。
使用方法為需在前面加::前綴,以<div>標籤作為範例:div::after { content: ''; css... },其中偽元素要添加 content: ''; ,否則沒效果。

  • ::after,在元素後面安插新的元素,前一篇有介紹脫離文檔流的父容器攤縮問題,需使用偽元素(當然還有別的方法,但這個方法比較乾淨),因為在元素後面添加新的元素,剛好支撐了父容器的高度以解決攤縮問題,除了解決攤縮問題,還能製作與一般標籤一樣的事情,如下面按鈕淺藍色的部分。

  • ::before,在元素前面安插新的元素,與上一個很相似,只是從元素後面變成元素前面,如下面按鈕藍紫色的部分。

  • 偽元素中的 content 是必須要添加的,它代表了偽元素的內容物,通常情況下都是寫一般 string 空字串,當然也有很多值可以寫,但這就需要研究了。

我個人就很喜歡利用偽元素來自製 icon,並透過 CSS 動畫優化。如手機上常出現的漢堡按鈕

漢堡按鈕
漢堡按鈕 Codepen

屬性選擇器

選擇器大致上都介紹得差不多了!

這裡剛好補充一下屬性選擇器,屬性選擇器也有點類似於偽類選擇器,同樣都是要搭配其他選擇器才能使用,不過他是屬於把選擇器條件範圍縮小,平時就有效果了,並不像偽類選擇器平時沒效果。

因為我平時很少使用,但想說都介紹選擇器了,也覺得屬性選擇器可能有時候有奇效,所以簡單介紹。
使用方法是屬性用[key = value]來縮小範圍。

  • input[type="checkbox"],鎖定複選框套入樣式。
    checkbox
    只針對複選框修改寬度高度
  • a[url^="https://ithelp.ithome.com.tw/"],選定超連結網址開頭https://ithelp.ithome.com.tw/套入樣式
    a
    • 條件等於前面加^,表示開頭要包含的條件,如url^=https://,網址符合 HTTPS 協定的套入樣式
    • 條件等於前面加$,表示結尾要包含的條件,如src$="png",PNG 圖檔的套入樣式
    • 條件等於前面加*,表示字串中只要有符合的條件,如url*=google,網址中有 google 的套入樣式

總結

從一開始到現在,我們已經把最基礎的切版技能都瞭解了,明天將進入切版重頭戲 RWD 響應式網頁設計章節!


上一篇
Day.8 「怎麼就這樣脫離文檔流了!」 —— CSS 定位屬性 position & 浮動元素 float
下一篇
Day.10 「沒有 RWD 的網站 === 沒有未來」 —— RWD 響應式網頁設計
系列文
入門前端技能之旅30

尚未有邦友留言

立即登入留言