先來個比較表

為什麼使用

在 W3C 文件中對這兩者有使用的說明

偽類(Pseudo-classes)：為了選擇 DOM tree 之外的信息，或者使用其他簡單選擇器不能表達的信息。例如：設定滑鼠滑過的樣式(:hover)、被訪問過的連結的樣式(:visited)。

偽元素(Pseudo-elements)：創造一個關於 DOM tree 的抽象內容，提供一種方法來引用源文檔中不存在的內容。例如：指定第一行或第一個字。目前多是用 :before :after 來做一些特殊效果，之後再另外示範。

所有的偽類 與 偽元素

W3C 官網中有列出所有的偽類與偽元素，並個別說明用法，在此就不多做說明。

偽類

• 動態：:link、:visited、:hover、:active、:focus
• 目標：:target
• 語言:lang
• UI元素狀態：:enabled、:disabled、:checked
• 結構：:root、:nth-child、:nth-last-child、:nth-of-type、:nth-last-of-type、:first-child、:last-child、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty
• 否定：:not

偽元素

::first-line、::first-letter、::before、::after

偽元素的 content 無用小實驗

在剛學會使用偽元素的時候，覺得偽元素相當有趣，其中一個是對於 content 屬性的使用。
偽元素的使用一定要有 content Property，不然不會有任何效果，而 content Property 可以放文字，如下：

.box:after{
     content: '國立故宮博物院 國立故宮博物院的收藏，承襲自宋、元、明、清四朝宮中收藏，質量兼備。 '
}

但是如果我想要在特定地方斷行怎麼辦呢？
例如上面的例子，我想要在第一個 國立故宮博物院 後面就斷行該怎麼辦？

可以在第一個國立故宮博物院的後面加上 \A，再加上 white-space: pre-line
這樣斷行之後的文字還是可以自動摺行。

.box:after{
     content: '國立故宮博物院 \A 國立故宮博物院的收藏，承襲自宋、元、明、清四朝宮中收藏，質量兼備。 ';
     white-space: pre-line;
}

試玩小範例

可以自行試試 white-space 的值，如果換為其他的值有何效果。
white-space 之後有時間會再另外做說明。

不過，這個小實驗有點無用，純粹好玩而已，為什麼這麼說呢？
因為 CSS 內的文字不會有 SEO ，所以把文字做在 CSS 內對網站的 SEO 不會有加分，所以想要有說明文字，可以用別的方式來做比較適合。

以上是今天的偽類 與 偽元素的簡單介紹，明天會介紹比較詳細的 content 使用方式。
各位看倌明天見囉～

參考資料：
[1] Pseudo-classes - w3.org
[2] Pseudo-elements - w3.org