伪类和伪元素

一、什么是伪类与伪元素

依据官方对其的描述：CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素用来修饰不在文档树中的部分。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的 CSS 类相似，可以为已有的元素添加样式，但是它只有处于文档树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

二、伪类的具体用法

• 状态
  1. :link：选择未访问的链接
  2. :visted：选择已访问的链接
  3. :hover：选择鼠标指针浮动在其上的元素
  4. :active：选择活动的链接
  5. :focus：选择获取焦点的输入字段
• 结构化
  1. :not：否定伪类，用于匹配不符合参数选择器的元素
     如下例，除了第一个<p>元素外，其余<p>元素的文本都会变成蓝色

     <p class="a">1</p>
     <p>2</p>
     <p>3</p>
     <p>4</p>
     

     p:not(.a) {
         color: blue;
     }
     

  2. :first-child：匹配元素的第一个子元素
  3. :last-child：匹配元素的最后一个子元素
  4. :first-of-type：匹配属于其父元素的首个特定类型的子元素的每个元素
     如下例，第一个<p>元素和第一个<span>元素的文本会变成蓝色

     <p class="a">1</p>
     <p>2</p>
     <p>3<span>aaa</span></p>
     <p>4</p>
     

     div :first-of-type {
         color: blue;
     }
     

     【注意】元素与:必须有空格；会匹配到每一级第一个出现的标签类型
  5. :last-of-type：匹配元素的最后一个子元素
  6. :nth-chlid：根据元素的位置匹配一个或多个元素，它接受一个 an+b 形式的参数：
     • 1n+0 或 n，匹配每一个子元素
     • 2n+0 或 2n，匹配位置为 2、4、6、8… 的子元素，该表达式与关键字even等价
     • 2n+1，匹配位置为 1、3、5、7… 的子元素，该表达式与关键字odd等价
     • 3n+4，匹配位置为 4、7、10、13… 的子元素
  7. :nth-last-child：与:nth-chlid相似，从最后一个子元素开始计数
  8. :nth-of-type：与:nth-chlid相似，只匹配特定类型的元素
  9. :nth-last-of-type：与:nth-of-type相似，从最后一个子元素开始计数
  10. :only-child：当元素是其父元素中唯一一个子元素时，匹配该元素
  11. :only-of-type：当元素时其父元素中唯一一个特定类型的子元素时，匹配该元素
      【注意】不带type的，前/后选择所有父级元素下的第n个子元素；带type的，前/后选择所有相同的元素名称的第n个兄弟元素*
  12. :target：当URL带有锚名称，指向文档内某个具体的元素时，匹配该元素
• 表单相关
  1. :checked：匹配被选中的input元素（包括radio和checkbox）
  2. :default：匹配默认选中的元素（可能没有）
  3. :disabled：匹配被禁用的表单元素
  4. :enabled：匹配没有被禁用的表单元素
  5. :empty：匹配没有子元素的元素，如果元素中含有文本节点、HTML元素或者一个空格，则不能匹配这个元素
  6. :in-range：匹配在指定区域内的元素（type='number'）
  7. :out-of-range：匹配不在指定区域的元素
  8. :indterminate：当某组中的单选框或复选框还没被选取时，匹配所有框
  9. :valid：匹配条件验证正确的表单元素
  10. :invalid：匹配条件验证错误的表单元素
  11. :optional：匹配是具有optional属性的表单元素（当表单元素没有设置为required时，即为optional属性
  12. :required：匹配必填的表单元素
  13. :read-only：匹配设置了只读属性的表单元素
  14. :read-write：匹配可读及可写的元素

三、伪元素的具体用法

• ::before：在被选元素前插入内容，需要使用content属性来指定要插入的内容，被插入的内容实际上不在文档树中
• ::after：在被选元素后插入内容，与::before类似
• ::first-letter：匹配元素中文本的首字母
• ::first-line：匹配元素中第一行的文本，这个伪元素只能用在块元素中，不能用在内联元素中
• ::selection：匹配用户被用户选中或者处于高亮状态的部分
• ::placeholder：匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效

全文cx痕迹严重，详细文章请看http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/