共计 1412 个字符，预计需要花费 4 分钟才能阅读完成。
前端根底：CSS 中伪类的作用和根本应用
作为一名优良的前端开发，不会应用伪类和伪元素有点说不过去。
然而很多小白可能伪类和伪元素都分不清楚，我先同艰深的话解释下：伪类是用来给指定选择器增加状态成果，伪元素是给指定元素增加内容润饰。
明天先带大家看一下伪类是如何应用的，今天给大家演示下伪元素的应用。
常见的伪类诸如:active/:focus/:hover/:visited/:first-child 等大家可能比拟相熟，用的比拟频繁，实际上伪类有几十个，上面分门别类的展现一下
一、用于链接，按钮等元素的常见伪类
// :active 常见于用户点击按钮和松开按钮之间的款式
// :visited 罕用于链接被拜访之后的款式
// :link 一个链接未被点击时的款式 二、用于可获取焦点的元素的常见伪类
// :focus 可输出内容的标签选中时的元素款式
// :focus-within 当他的后辈呈现光标时触发该款式 三、用于打印时的常见伪类
// :first 打印文档的时候，第一页的款式。用于 @page
// :left 用于打印时的左侧款式
// :right 用于打印文档的所有右页 四、用于指定元素的常见伪类
// :first-child 示意在一组兄弟元素中的第一个元素。// :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 来筛选出在一组兄弟节点的地位
// :only-child 匹配没有任何兄弟元素的元素
// :only-of-type 匹配没有其余雷同类型的兄弟元素
五、与鼠标相干的伪类
// :hover 鼠标悬浮在某个元素上时的款式 六、其余伪类
// :checked 示意处于选中状态是的 radio、chexkbox 等元素的状态
// :default 示意处于默认值时的元素状态，常见于 radio option 等
// :dedined 用于定义好的元素上。常见于自定义元素标签
// :empty 当元素没有子元素时采纳此款式
// :enadled 用于能被激活或者能获取焦点的元素
// :host 用于 shadowDOM 不常见
// :indeterminate 用于状态不确定的元素，比方正在编辑中的 input 或者正在扭转中的 progress 元素
// :in-range 用于 input 标签的内容在限定的 min 和 max 中的款式
// :out-of-range 用于 input 标签的内容超出 min 和 max 时的款式
// :lang() 依据语言确定一些符号
// :optional 用于没有示意必填的一些元素属性
// :read-only 示意元素不可被用户编辑的状态
// :read-white 代表可被用户编辑的元素的款式
// :root 相当于 html 不过比 html 标签选择器权重更高
// :target 罕用于点击跳转套页面指定 id 元素时的款式
// :valid 内容符合要求时的元素款式
原本想再写一些例子的，然而有点晚了先睡觉啦有看的再更新。
正文完