伪类和伪元素学习笔记

css2.1 Selectors章节中对伪类与伪元素的描述: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

一、基本概念

伪类

用于当已有元素处于的某个状态时，为其添加对应的样式；

效果等同于给元素添加一个类，然后定义这个类的样式。（由于它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。）

常见伪类：

:link, :visited, :hover, :active, :focus（状态）
:first-child, :first-of-type, :last-child, :last-of-type, :not, :nth-child, :nth-last-child, :nth-of-type, :only-child, :only-of-type（结构）
:checked, :default, :disabled, :invalid, :read-only, etc.（表单验证相关）
:lang, :dir （语言相关）

伪元素

用于创建一些不在文档树中的元素，并为其添加样式。

效果等同于创建一个虚拟的（不存在于DOM树的）元素，并为之添加样式。

常用伪元素：

::first-letter（相当于创建了一个来包裹首字母）
::first-line
::before
::after

二、用法与讨论

1. 伪元素用单冒号还是双冒号？

CSS3中伪元素用双冒号::，如 ::after，以区分伪类的单冒号 :，如 :hover；

但出于兼容性考虑，目前规范建议都使用单冒号。

2. 伪类选择器加与不加空格的区别？

（这里讨论的主要是结构性伪类选择器，且待考证，欢迎讨论）

伪类选择器前不加空格：选择的是元素本身；
伪类选择器前加空格：选择的是元素的子元素（且不一定是该种元素）；

实例：


  A
  B
  C D1D2E1E2
  F G
  H

若不加空格（如下例），修饰的是元素，且该元素是其父元素下的第一个元素，因此 A 和 G 呈红色：

span:first-of-type {
  color: red;
}

若加空格（如下例），修饰的是元素的子元素中，第一个任意类型的元素；可能选中多个，且选中的元素不一定是元素，因此 D1，E1 和 G 呈黄色：

span :first-of-type {
  color: yellow;
}

经验证 :first-child, :first-of-type, :nth-child 符合以上用法，且:first-of-type的 MDN文档内也列举了这两种用法。

3. `:first-child` 和 `:first-of-type` 的区别？

(1) :first-child 比 :first-of-type 多一个条件：

p:first-child - 父元素下的第一个
元素且该元素是父元素下的第一个元素
p:first-of-type - 父元素下的第一个
元素

也即，任何 :first-child 元素一定是 :first-of-type 元素。

(2) 对于一个父元素，:first-child 匹配的最多是一个子元素，而 :first-of-type 可能匹配多个不同的子元素

div :first-child -
元素的第一个子元素
div :first-of-type -
元素的子元素里面每一种元素的第一个，假设有三种子元素
, , （个数不限），则会匹配到三个元素。

参考资料：
CSS伪类与伪元素完全指南
总结伪类与伪元素（以上两篇译自/参考自同一篇原文）
详解 CSS 属性 - 伪类和伪元素的区别
Jquery伪类选择器加与不加空格的区别