这是我参与更文挑战的第4天，活动详情查看： 更文挑战
1.伪类(pseudo-classes)
伪类的概念引入是为了能够表达在文档树语法之外无法通过简单的选择器表达的信息。伪类的语法是单个冒号带一个伪类名称。不区分大小写。有的伪类是互斥的，有的可以同时作用在同一个元素上，伪类也可以是动态的，来响应用户的交互。
由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又失去这个样式由此看可以看出,它的功能和 class有些类似,但是它是基于文档之外的抽象,所以叫伪类
有哪些伪类？
: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元素
2.伪元素(pseudo-element)
伪元素是在html文档树语法的基础上创造的一种抽象概念，例如，文档树语法里并没有提供一种机制让我们访问一个元素的内容的首个字母或者首行，伪元素提供了访问这样难以访问的信息的能力，伪元素还提供了对dom节点内不存在的内容的引用和生成能力，比如::after ::before 提供了生成内容的能力。
-
DM树没有定义的虚拟元素
-
核心就是需要创建通常不存在于文档的元素
-
比如 ::before ::after选择的是元素指定内容,表示选择元素内容的之前的内容或之后内容
-
伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。用于将特殊的效果添加到某些选择器
有哪些伪元素？
::first-letter 匹配内容的首个字符
::first-line 匹配内容的首行内容
::before 匹配内容前面的部分
::after 匹配紧跟内容后面的部分
::selection 匹配用户通过鼠标或者其他设备选中的内容部分
3两者区别
表示方法
- ss2中伪类、伪元素都是单冒号:表示
- css2.1后规定伪类用单冒号表示,伪元素用双冒号表示
- 浏览器同样接受css2时代已经存在的伪元素( :before :after :first-line :first-letter等)的单冒号写法
- css2之后所有新增的伪元素( selection),应该采用双冒号的写法
- css3中,伪类与伪元素在语法上也有所区别,伪元素修改以开头。浏览器对以开头的伪元素也继续支持,但建议规范书写为开头
定义不同
- 伪类即假的类,可以添加类来达到效果
- 伪元素即假元素,需要通过添加元素才能到达效果
总结
- 伪类和伪元素都是用来表示文档树之外的元素
- 伪类和伪元素分别用单冒号和双冒号来表示
- 伪类和伪元素的区别,关键点在于如果没有伪元素(或伪类)是否需要添加元素才能达到效果,如果是则是伪元素,反之是伪类
4相同之处
- 伪类和伪元素都不会出现在源文件和DOM树中。也就是说在html源文件中是看不到伪类和伪元素的不同之处
- 伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征
- 伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的
