前端基础：CSS伪类的作用和基本使用作为一个优秀的前端开发者，不使用有点说不过去伪类和伪元素。但是很多新手可能分不清伪类和伪元素的区别。我先通俗地解释一下：伪类用于给指定的选择器添加状态效果，伪元素用于给指定的元素添加内容修饰。今天我会告诉你如何使用伪类，明天我会告诉你如何使用伪元素。:active/:focus/:hover/:visited/:first-child等常见的伪类你可能很熟悉，而且使用频率很高。事实上，有几十个伪类。让我们按类别展示它们。1.用于链接、按钮等元素的通用伪类//:active常用在用户点击按钮和释放按钮之间的样式中//:visited常用在之后的样式中linkisvisited//:link为链接未被点击时的样式2.获取焦点元素的常用伪类常用伪类//:first打印文档时首页的样式。对于@page//:left用于打印时的左边样式//:right用于打印文档的所有右页4.指定元素的常用伪类//:first-child表示一组兄弟elements中的第一个元素。//:first-of-type表示其类型在一组兄弟元素中的第一个元素//:last-child表示父元素的最后一个子元素。//:last-of-type表示（其父元素的）子列表中给定类型的最后一个元素//:not()用于匹配不匹配一组选择器的元素。//:nth-child()匹配元素的集合(n=0,1,2,3...)//:nth-last-child()这个CSS伪类从兄弟节点从后向前匹配某些位置的元素//:nth-last-of-type()从末尾倒序计数//:nth-of-type对于有一组兄弟节点的标签，用n过滤掉一组中的ofsiblings节点的位置//:only-child匹配没有任何兄弟元素的元素//:only-of-type不匹配其他同类型的兄弟元素5.鼠标相关的伪类//:hover的鼠标悬停在上一次的某个元素上Style6,其他伪类//:checked表示radio,chexkbox等元素处于选中状态时的状态//:default表示元素处于默认状态时的状态值，这在单选选项等中很常见。//:dedined用于定义的元素。常见于自定义元素标签//:empty当元素没有子元素时使用此样式//:enadled用于可激活或可以获得焦点的元素//:host用于shadowDOM不常见//:indeterminate是用于状态不确定的元素，比如正在编辑的input或者正在改变的progress元素用于输入标签内容超过min和max时的样式//:lang()根据语言确定一些符号//:optional用于一些不需要的元素属性//:read-only表示该元素不能被用户编辑//:read-white表示该元素可被用户编辑的样式//:root等同于html但比html标签选择器具有更高的权重//:target常用于点击页面的样式指定id元素//:t时的元素样式有效内容符合要求本来想再写几个例子，但是有点晚了，看完就睡觉更新了。
