伪元素
- 我们想选择的页面区域不是通过元素来表示的，而我们也不想为此给页面添加额外的标记
- 此时CSS提供了一些特殊选择符
伪元素，双冒号语法 - 用于创建一些
不在文档树中的元素，为其添加样式 - 用于给元素
添加指定的内容或修改部分样式 - 通过
content属性 以文本的形式插入
常见伪元素
- ::before // 添加元素前的内容
- ::after // 添加元素后的内容
- ::first-letter // 修改一段文本的第一个字符(只能应用于块级元素)
- ::first-line // 修改一段文本的第一行(只能应用于块级元素)
- ::selection // 设置被用户选择时的样式，只能定义
color和background-color
伪元素都是以`双冒号`语法表示，但一些旧浏览器在实现时支持的是单冒号语法，故现在使用`单冒号也可以`
`content` 属性是必须的，没有则伪元素会失效
使用伪元素插入内容时，千万不能用它们插入对交互有实质影响的内容，以避免CSS不能正确加载
屏幕阅读器也没有统一方式解释伪元素，有的直接忽略，有的则会读取其中内容
伪类
- 我们想基于文档结构以外的情形来为页面添加样式
- 提供了一种特殊选择符
伪类，单冒号语法 - 用于选择元素的特定状态或关系
- 用于已有元素处于的某个状态时，为其添加对应的样式；这个状态是根据用户行为状态变化的
常见伪类
- 超链接伪类: :hover / :active / :focus ...
- 结构化伪类: :first-child / :nth-child / :last-child ...
- 表单伪类: :required / :valid / :read-only ...
- ...
伪元素都是以`单冒号`语法表示的
使用超链接伪类时，定义的先后次序很重要(后面写一篇详细的)
两者的区别
- 伪元素与伪类是用来修饰
不在文档树中的部分 - 他们不出现在源文件和文档树中，也就是说在
html源文件中看不到伪元素和伪类 - 两者的区别在于: 有没有创建一个文档树之外的元素
- 伪元素:
- 伪元素本质上是创建了一个有内容的虚拟容器
- 能够创建在
DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的 - 伪元素产生新对象，在
DOM树中看不到，但是可以操作
- 伪类:
- 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息
- 其实就是基于普通DOM元素而
产生的不同状态，他是DOM元素的某一特征 - 伪类不产生新的对象，仅是DOM中一个元素的不同状态
- 可以同时使用
多个伪类，而只能同时使用一个伪元素
