CSS伪类
什么叫伪类呢?
伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说,元素的特征是不可以从DOM树上推断得到的,而且其是动态的,当用户和DOM进行交互的时候,元素可以获得或者失去一个伪类。(这里有一个例外,就是:first-child
和:lang
是可以从DOM树中推断出来的。)
CSS的现有标准中,伪类包括:
:first-child
点我看手册,应用第一个子元素:link
点我看手册,应用未访问过的链接:visited
点我看手册,应用已访问过的链接:hover
点我看手册,应用鼠标指针悬浮的元素:active
点我看手册,应用活动的链接:focus
点我看手册,应用聚焦的输入元素:lang
点我看手册,伪类将应用于元素带有指定lang的情况,不常用
CSS伪元素
什么是伪元素呢?
伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式,例如:before
和:after
能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
CSS的现有标准中,伪元素包括:
:first-letter
点我看手册,伪元素的样式将应用于元素文本的第一个字(母):first-line
点我看手册,伪元素的样式将应用于元素文本的第一行:before
点我看手册,在元素内容的最前面添加新内容:after
点我看手册,在元素内容的最后面添加新内容
伪类和伪元素的相同之处:
伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。
伪类和伪元素的不同之处:
伪类其实就是基于普通DOM元素而产生的不同状态,他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象,而且这些抽象对象是能够访问到的。
总结:伪元素产生新对象,在DOM树中看不到,但是可以操作;伪类不产生新的对象,仅是DOM中一个元素的不同状态;