css 伪类和伪元素的用法和区别

一：什么是css伪类？
CSS pseudo-classes
伪类的概念引入是为了能够表达在文档树语法之外无法通过简单的选择器表达的信息。伪类的语法是单个冒号带一个伪类名称。不区分大小写。有的伪类是互斥的，有的可以同时作用在同一个元素上，伪类也可以是动态的，来响应用户的交互。
有哪些伪类？

:link       默认带href属性的a标签的样式
:visited    被访问过的链接的样式
:hover      鼠标悬浮上去的样式
:active      鼠标按下去的时候的样式
上面四种定义的时候需要保证这样的顺序

:focus  当前元素为focus状态
:lang   lang(en) 对应html上的lang属性，符合的话执行样式
:empty   选择没有子元素的元素执行样式
:enable  选择表单元素具有非disable属性的元素，执行样式
:disable  选择表单元素具有disable属性的元素。执行样式
:checked 单选按钮或者多选按钮被选中的，执行样式
:target  锚点跳转到的内容执行样式
:root    匹配文档的根元素。html中默认就是html元素
:default 默认状态的表单元素，比如默认选中的下拉框，单选按钮，多选按钮，执行样式
:first-of-type 选中该元素是别人首个子元素，例如p:first-of-type  就是所以元素子元素中第一个p元素
:last-of-type  意义和上面类似，代表最后一个
:only-of-type  代表所有元素中只有一个该类型的元素p:only-of-type
:only-child  例如p:only-child 代表子元素中只有一个元素，且必须是该类型p
:first-child  例如p:first-child 代表是父元素中的第一个元素，且类型为p
:last-child  意义同上，最后一个元素
:nth-child(n) 例如p:nth-child(2) 表示选择子元素第二个且类型为p的元素，n从1开始算
:nth-last-child(n) 意思和上面类似，只不过是从结尾开始往前数第n个，n是从1开始算
:nth-of-type(n)  例如p:nth-of-type(2) 代表子元素中第二次出现的p元素  n从1开始算
:nth-last-of-type(n)  意义和上面类似，只不过是从尾部往前数，n从1开始算
:not()  例如 :not(p) 匹配非p元素

二：什么是css伪元素？
CSS pseudo-element
伪元素是在html文档树语法的基础上创造的一种抽象概念，例如，文档树语法里并没有提供一种机制让我们访问一个元素的内容的首个字母或者首行，伪元素提供了访问这样难以访问的信息的能力，伪元素还提供了对dom节点内不存在的内容的引用和生成能力，比如::after ::before 提供了生成内容的能力。
一个伪元素包含两个冒号 ::
有哪些伪元素？

::first-letter  匹配内容的首个字符
::first-line    匹配内容的首行内容
::before        匹配内容前面的部分
::after         匹配紧跟内容后面的部分
::selection     匹配用户通过鼠标或者其他设备选中的内容部分

三：伪类和伪元素的异同
1.写法的区别
在css3中定义了双冒号代表伪元素，单冒号代表伪类。以此来区分伪元素和伪类。为了兼容老的浏览器，用单冒号类表达伪元素也是能够被识别的，比如写:after :before :first-line :fist-letter
2.概念的区别
伪类侧重丰富选择器的选择语法范围内元素的选择能力，伪元素侧重表达或者定义不在语法定义范围内的抽象元素。
3.兼容性
伪类和伪元素各自有一些存在的兼容问题。使用的时候留意兼容性。

通过伪类和伪元素的配合使用，发挥想象力，可以实现很多复杂的特殊效果。可以在一定程度上避免使用js来操纵样式。