375
你不知道的事兒三（CSS）
在前麵兩篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介紹了一些CSS方麵比較隱晦的但又很實用的技巧。相信這些技巧會為大家在項目實踐中帶來一定的幫助，本文作為《你不知道的CSS》係列的第三篇文章，將繼續在CSS技巧方麵進行探討，不同於前兩篇的是，本文將著重介紹CSS中偽類和偽元素在項目中的應用場景。偽類相信大家最熟悉也是用的最多的莫過於:hover, :active, :focus之類的，因為這些在平常的項目中太常用了（然而我目前依然見過還有用js去添加.hover類來變化背景色的同學）。而偽元素如:before, :after相信大家也用的爛熟了。 當然對於比較常見的偽類（元素）不在本文的討論範圍類，本文主要介紹一些生僻的但是又非常實用的偽類(元素)。CSS的世界已經變天了，拋開過去，擁抱變化吧~
偽類和偽元素的區別
偽類和偽元素是一個比較容易混淆的概念，這不僅僅是從名稱上，而且在寫法上也是相似的（目前因為兼容性的問題，它們的寫法是一致的）。這就更容易混淆了。但還是希望大家在書寫的過程中養成習慣，至於兼容性交給postcss等轉換工具去實現。
規範
css3 明確規定了偽類用一個冒號
:來表示，而偽元素則用兩個冒號::來表示。
區別
- 偽類更多的定義的是狀態，如
:hover，或者說是一個可以使用CSS進行修飾的特定的特殊元素，如:first-child - 偽類使用一個冒號
: - 常見偽類：
:hover:active:focus:visited:link:lang:first-child:last-child:not
- 偽元素簡單來說就是不存在於DOM文檔樹中的虛擬的元素，它們和HTML元素一樣，但是你又無法使用JavaScript去獲取，如
:before - 偽元素使用兩個冒號
:: - 常見偽元素：
::before::after::first-letter::first-line
用:VALID和:INVALID來做表單即時校驗
html5豐富了表單元素，提供了類似required,email,tel等表單元素屬性。同樣的，我們可以利用:valid和:invalid來做針對html5表單屬性的校驗。
-
:required偽類指定具有required 屬性的表單元素 -
:valid偽類指定一個通過匹配正確的所要求的表單元素 -
:invalid偽類指定一個不匹配指定要求的表單元素
css實現表單校驗
有沒有最開始學angular的感覺
最後更新：2017-11-02 11:33:47