最近在看一些 CSS 的 pseudo-class selector，有些在瀏覽器支援度已經很普及卻很少看到有人在 CSS 中實際使用，在這紀錄幾個我覺得蠻實用的 selector
提供個總表
- :empty
- :after / :before
- :enabled / :disabled
- :first-child/:last-child
- :first-of-type/:last-of-type
- :invalid/:valid
- :lang
- :only-child
- :only-of-type
- :optional/:required
- :root
- ::selection
-
:empty 元素中是否有內容(包含空白)。(IE9 以上及其他瀏覽器幾乎都支援)
-
:after / :before (IE9 以上及其他瀏覽器幾乎都支援) 在元素前/後新增擬元素(通常會使用 content 屬性)。 最簡單的例子，但是這個例子實務上可能不是這麼實際
實務上，我會比較建議把這種擬元素套到 icon 或是一些比較無結構意義的地方，進而讓 html 減少寫無架構性的元素。(程式碼可能比較長，這邊就不寫) 例如: clearfix、block 的垂直置中(方法六) 及 tooltip 常用到的三角形
-
:enabled / :disabled (IE9 以上及其他瀏覽器幾乎都支援) 被設置 enabled(enabled=“enabled”)、 disabled (disabled=“disabled”) 的 元素樣式
-
:first-child/:last-child (IE7以上及各瀏覽器都支援) 父元素中，第一個/最後一個子元素符合選擇器的樣式。(看例子比較清楚)
-
:first-of-type/:last-of-type (IE9 以上及其他瀏覽器幾乎都支援) 第一個不同(unique)的元素。(看例子比較清楚)
-
:invalid/:valid (IE10 以上及其他瀏覽器幾乎都支援) input 資料格式錯誤/正確時的樣式。
-
:lang() (IE7 以上及其他瀏覽器幾乎都支援) 語系，元素(任何元素)的 lang 屬性值，或是 meta 及 http header 的 lang 欄位。
-
:only-child (IE9 以上及其他瀏覽器幾乎都支援) 當只有一個 child 時的樣式。
-
:only-of-type (IE9 以上及其他瀏覽器幾乎都支援) 只有一個此類型元素時。(看例子比較清楚)
-
:optional/:required (IE10 以上及其他瀏覽器幾乎都支援，opera mini 不支援