最近在看一些 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 不支援 <select>)
沒有 required 的輸入欄位樣式。
- :root (IE9 以上及其他瀏覽器幾乎都支援)
dom 最根節點的元素(網頁的話就是 html)，xml 、svg 或其他的 markup 檔案可能會是其他根節點
- ::selection (IE9 以上及其他瀏覽器幾乎都支援，firefox 要加前綴 -moz-，但手機的 opera、sofari 及 chrome 不支援)
當元素被滑鼠選擇(highlight)時的樣式。
參考資料：
Leave a Reply