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