Johnson Mao

Day.9 「我介於有與沒有之間～」 —— 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"]，鎖定複選框套入樣式。 複選框 套入樣式 只針對複選框修改寬度高度
  • a[url^="https://ithelp.ithome.com.tw/"]，選定超連結網址開頭是https://ithelp.ithome.com.tw/套入樣式 iT 邦幫忙 連結 套入樣式
    • 條件等於前面加^，表示開頭要包含的條件，如url^=https://，網址符合 HTTPS 協定的套入樣式
    • 條件等於前面加$，表示結尾要包含的條件，如src$="png"，PNG 圖檔的套入樣式
    • 條件等於前面加*，表示字串中只要有符合的條件，如url*=google，網址中有 google 的套入樣式

#總結

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

回首頁