深入理解伪类和伪元素

为什么会引入伪类和伪元素?

翻译官方的话: 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述。

什么是伪类?

概念： 为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于:

1. 设置鼠标悬停在元素上时的样式(:hover)
2. 为已访问和未访问链接设置不同的样式(:link,:visited)
3. 设置元素获得焦点时的样式(:focus)

什么是伪元素?

概念： 创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)

它可以用于:

• 设置元素的首字母、首行的样式 (::first-letter,::first-line)
• 在元素的内容之前或之后插入内容 (::before,::after)

###　伪类的分类

• 状态型伪类

常见的状态伪类:

:link 应用于未被访问过的链接
:visited 应用于被访问过的链接
:active 应用于被激活的元素
:hover 应用于鼠标悬停到的元素
:focus 应用于被focus的元素

注意:
如果这几个伪类同时作用于一个元素上，则有顺序上的约定，否则可能造成伪类不生效的问题。

:hover必须定义在:link和:visited之后
:active必须定义在:hover之后
理想的顺序: :link　->　:visited ->　:hover -> :active 

• 结构型伪类 (css3新增)

常见的结构型伪类:

  :first-child 选择某个元素的第一个子元素；  
  :last-child 选择某个元素的最后一个子元素；
  :nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型；
  :nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素，不论元素的类型；
  :nth-of-type() 规定属于其父元素的第n个 指定 元素；
  :nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素；
  :first-of-type 选择一个上级元素下的第一个同类子元素；
  :last-of-type 选择一个上级元素的最后一个同类子元素；
  :only-child 选择它的父元素的唯一一个子元素；
  :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
 :checked匹配被选中的input元素，这个input元素包括radio和checkbox。
 :empty 选择的元素里面没有任何内容。
  :disabled匹配禁用的表单元素。
  :enabled匹配没有设置disabled属性的表单元素。
  :valid匹配条件验证正确的表单元素。
  :in-range选择具有指定范围内的值的 <input> 元素。
  :optional选择不带 "required" 属性的 <input> 元素。
  :focus选择获得焦点的 <input> 元素。

伪元素

全部的伪元素:

选择器	例子	例子描述
::after	p::after	在每个 元素之后插入内容
::before	p::before	在每个 元素之前插入内容
::first-letter	p::first-letter	选择每个 元素的首字母。
::first-line	p::first-line	选择每个 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

规范要求

CSS3 规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 (:: )， 伪类使用一个冒号 (: )

注意:

在这里对于::first-line,我们需要注意，::first-line 伪元素只能应用于块级元素。

在这里对于::first-letter ,我们需要注意，::first-letter 伪元素只能应用于块级元素。

在元素的 ::before和 ::after中插入内容-content属性（如果没有写content样式，伪元素会失效）