[CSS] 各種 CSS Pseudo-Class Selector

最近在看一些 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”)、 […]

Continue reading