偽類(Pseudo-classes)

在指定的動作下，修改一個已經存在的 DOM 的 CSS

偽類的前面會使用:來前綴，CSS 最常見的偽類就屬:hover莫屬了。
hover 的作用在於當滑鼠移至寫有的:hover元素時，CSS 會依照設定有所改變。
點這看看 hover 的範例

另一個常用的偽類我們以選孩子的功能為例(嗯?)
:first-child顧名思義就是選取第一個孩子(子元素)之意，既然有子元素，當然就有父元素；
父元素哪裡找？他就是套用:first-child的元素的上一層 DOM。
例如下列範例中，ul 便是 li 們的父元素：

<ul class="father">
  <li>孩子一號</li>
  <li>孩子二號</li>
  <li>孩子三號</li>
</ul>

那:first-child可以拿來做什麼呢？
舉個例子來說，假如今天我只想改變第一個<p>的 css，就可以拿來這麼用
(知道範例裡金剛戰士是什麼東東的人喊聲又 XD)
點這裡看金剛戰士(誤)

偽元素(Pseudo Element)

基於原本的DOM創造一個看不見的新的假元素

偽元素前面使用::做為前綴，雖然有些偽元素只寫:也能運行，但要學就學好，還是乖乖使用::吧。
比起偽類，偽元素的數量並沒有那麼多，常見的如::before、::after，顧名思義，就是在選取的元素前和後創造新的假元素。
我們就直接來看範例

在::before和::after中，content代表偽元素的內容，若要留白填入顏色來做成圖形等場合，也可以直接寫成" "。

另外，偽類跟偽元素跟可以混合使用。
點這邊看看以上的總結範例

... ...為什麼總結範例變得有點像鬼故事？
不，其實是邊緣人的故事(喂)

關於詳細的偽類跟偽元素，可以參考MDN的文件，還有卡斯伯老師有精美圖文解說的文章。
最後的最後還是想放張跟標題呼應的圖(你夠惹)