Day27【CSS】伪类 & 伪元素

伪类和伪元素皆是从 DOM tree 抽象出来的概念，
用以修饰实际上不在 DOM tree 上的部分。

比较表

伪类：

• 操作对象：原本就存在的元素
• 用途：用於选取特定状态的元素
• 语法：selector:pseudo-class
• 伪类举例：
  • :hover：鼠标悬停其上的元素
  • :visited：已访问过的链接
  • :focus：获得焦点的元素

伪元素

• 操作对象：DOM tree 之外的虚拟元素
• 用途：修饰元素对应的抽象内容
• 语法：selector::pseudo-element
• 共 6 种：
  • ::after：在一个元素後插入内容
  • ::before：在一个元素前插入内容
  • ::first-line：文本的第一行
  • ::first-letter：文本的第一个字母
  • ::marker：项目符号样式
  • ::selection：被游标选择反白的部分

CSS2 以前，first-line 使用的是单冒号（:），CSS3 後为区分伪类和伪元素而改成双冒号（::），同时向下兼容，因此 :first-line 和 :first-line 两种写法 CSS3 都可接受。

参考资料：

• Day24：小事之 CSS 伪类 与 伪元素
• CSS | 全都是假的！关於那些伪类和伪元素 - 基本用法
• CSS伪类与伪元素总是傻傻分不清，这份总结够面试用了
• CSS伪类 | w3school
• CSS伪元素 | w3school