伪类和伪元素的根本区别在于：它们是否创造了新的元素。
伪类
是什么
用于已有元素处于某种状态时为其添加对应的样式。
语法
：
使用数量
多个
使用位置
前方和后方
类与元素
修饰
使用场景
状态类：
- :link a链接未被访问时
- :visited a链接已被访问时
- :hover 鼠标悬停时
- :active 鼠标点击与释放时
- :focus 输入焦点时
结构类：
- :first-child 父元素的第一个子元素
- :last-child 父元素的最后一个子元素
- :nth-child(n) 父元素的第 n 个子元素
- :nth-of-type(n) 同类型中第 n 个同级兄弟
表单类：
- :checked 处于选中状态
- :disabled 处于禁用状态
- :valid 匹配输入值为合法的元素
- :required 指选择器在表单元素是必填项时设置指定样式。只适用于表单元素: input, select 和 textarea。
语言类：
- :dir 匹配指定阅读方向的元素
- :lang 匹配带有指定 lang 属性的元素
伪元素
是什么
不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
语法
::
使用数量
单个
使用位置
后方
类与元素
创建对象
使用场景
- ::before 和 ::after 设置在对象前后发生变化的内容，和content属性一起使用。
- ::first-letter 对象内的第一个字符
- ::first-line 对象内的第一行
- ::selection 对象被选择时
- ::placeholder 对象被文字占位时
- ::backdrop （实验中）
标签：伪类,元素,使用,表单,child,first 来源： https://www.cnblogs.com/tiddler/p/16640694.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。