CSS | 全都是假的！關於那些偽類和偽元素 - 基本用法
前言
Hi！因為最近稍稍微忙，想做的事情多了一些就調整了一下學習重心，比較沒辦法像之前那樣子下班就打打文章，只能趁著連假或突然非常有靈感的時候生產 😂 ，但即使如此我還是不會放棄寫作，沒什麼偉大的理由，因為寫作是一件使我感到放鬆的事情，希望大家也能夠以輕鬆的心情觀賞 🙌 。
偽類和偽元素是什麼？
直接破題：
偽類能夠在特定動作時改變 DOM 的 CSS 樣式，
偽元素則是基於原有的 DOM ，創建另一個可設定不同 CSS 的 DOM 屬性
如果到這裡能夠了解上面兩句話的意思，那就可以先離開……但是但是！下面還會有一些自̸認̸為̸精彩的解說和例子，如果現在離開，就看不到了哦！
偽類（ Pseudo-classes ）
先來說說偽類（ Pseudo-classes ）吧！所有的偽類都會用 : 做前綴詞宣告，在網頁上，最常用的偽類應該就是 :hover ，它能夠在滑鼠移到設定了 :hover 的 Element 時，讓 Element 改變原有的 CSS ，例如：
就像上方的操作，其實 color: #aaf 並不是真正的 title class 擁有的屬性，它平常也不會出現，但只要滑鼠移動到該 DOM 上就會暫時變成 :hover 版本的 color: #aaf ，這個就是假的 class ，所以叫做「偽類」。
那除了基本的 :hover 外，還有一個 :focus 也是偽類的一種，通常會用在 input 上面：
將 :focus 放到 input 上方，就會在輸入時對 input 設置與眾不同的樣式，可以用在表單輸入時，讓使用者輕鬆看到目前輸入到哪個 input 。
然後這裡有個地方和大家說明一下，上方在 :focus 中除了設置 border 外，另外將一個 outline 的屬性設為 none ，它是外邊框的意思，如果常常用 Chrome 操作畫面應該對下方的藍色框框不陌生：
這是 Chrome 為 input 設置的 outline 外邊框屬性，功用也是來讓使用者明確知道自己正在哪個 input 上，因為它會蓋掉我另外在 :focus 設置的 border ，所以就先把它 none 掉。
偽類也不是只能夠影響自己，只要有辦法用 CSS 的 selector 選到，那就可以改變其他 Element ：
其他還有許多偽類可以參考 MDN ，上面會列出所有的偽類：
除此之外，也有可以在一群相同 class 的 Element 上，選擇設置偽類的類型 :nth-of-type ，比較常見的是表格，在資料表中常常有間隔的 tr 樣式不同，來讓人不會眼花撩亂：
上方的操作可以看見 :nth-of-type 會帶有一個參數，該參數的 n 把它理解為「每個」，因此只要設置 2n 就代表「每兩個」，也就是當該 Element 在相同群當中的雙數就會啟動偽元素，而如果要單數的話，就讓每兩個時再 +1 ，就會變成每個雙數加一，也就是單數了。
搭配另外一種說明解說， n 會從 0 開始 +1 ，因此如果設為 2n 那經過計算就會是 2 * 0 = 0 、 2 * 1 = 2 、 2 * 2 = 4 ……以此類推，所以會被改變的就是第零個（但不存在）、第二個、第四個……接續下去，以單數列說明 2n + 1 就會變成 2 * 0 + 1 、 2 * 1 + 1 ……以此類推，因此被影響到的元素就會是第一個、第三個、第五個這樣！
因為不知道怎麼解說會比較好懂，所以就都留著了 🙌 ！
偽元素（ Pseudo-element ）
偽元素（ Pseudo-element ）比較有趣一點，會接觸到是因為去年在參加六角學院舉辦的活動，那時候有出一個版，一部份內容長這樣子：
那時候的我真的百思不得其解，直到看了某位大神使用偽元素實現這個效果，真心讓我感到佩服，下方會再提到這個效果怎麼實現的！在這之前還是先來介紹一下什麼是「偽元素」。
偽元素與偽類不同，為了區分它們，在設定時的前綴詞使用 :: ，不過根據可靠消息，在 CSS3 之前還沒有想過要區分，所以有一些偽元素還是可以只用 : 做前綴，它們雖然向下相容，但是平常還是維持一下下良好的編寫習慣。
然後它不像偽類，只會在達成特定條件時才會觸發，只要你設置了偽元素，那它就會以原有 Element 的 Style 樣式為主，再 Render 另一個 Element ，而且還可以針對另外 Render 的 Element 指定不同的樣式或內容。
但是！偽元素並不是所有的 Style 屬性都能夠設置，它也有分什麼樣子的偽元素只能設置哪些 Style 屬性，偽元素的應用通常都會使用在為文字或圖片加上一些不同的裝飾，這裡就先挑兩個最常用到，或是說不定有看過但不曉得是什麼的 ::after 和 ::before 來解釋。
::before 、 ::after
這兩個偽元素能在原 Element 的前面或後面增加另一個 Element ，簡單來說：
上方的 HTML 內只有一個 div ，但是 Render 到畫面上的結果藉由操作偽元素，誕生了另外兩個 Element ，分別是前面的 ::before 和後面的 ::after ，而且也為他們兩個設置了不同的 color ，然後需要注意的是偽元素的內容是用 content 屬性設置的！在 content 設置的內容會被 Render 到偽元素中呈現。
另外，在偽元素中也可搭配 attr ，從原本的 Element 獲取屬性的資料，例如：
偽元素也可以和偽類同時使用：
最後，要來說明那個疊字怎麼做了！主要是利用 ::before 和 ::after 來針對另外兩個漸漸變淡的 Element 撰寫不同的 Style ：
文章簡單介紹了「偽類」及「偽元素」的差別，也分別介紹了它們的使用方法和運用，可能有些地方說得不夠好，或是例子舉得不夠明確，有任何建議或問題，再麻煩大家留言告訴我！我會盡快修改或回覆的！謝謝大家！
參考文章
- http://archerworkshop.info/%E6%B6%88%E9%99%A4chrome%E7%80%8F%E8%A6%BD%E5%99%A8input%E5%85%83%E7%B4%A0%E7%9A%84%E8%97%8D%E8%89%B2%E9%82%8A%E6%A1%86/?doing_wp_cron=1559996803.0398180484771728515625
- https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered
- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
