# 区别

伪类的效果可以通过添加实际的类实现, 伪元素的效果可以通过添加实际的元素来实现。
伪元素:不存在于dom文档中,是虚拟的元素,是创建新元素。
伪类:存在于dom文档中,但无须标识的分类。也能用类来描述出来。

  • 区别在于 是否创造了新的元素。

# 伪元素

el::first-letter
设置对象内第一个字符的样式

el::first-line
设置对象内第一行的样式

el::before
在对象前添加内容,配合content使用

el::after
在对象后添加内容,配合content使用

el::placeholder
设置对象占位符的样式

el::selection
设置对象被选择时的样式

# 伪类

el:link el:visited
设置超链接a标签 未被访问 以及 被访问后 的样式

el:hover el:active
设置元素在 被鼠标悬停时 以及 被鼠标点住不放时 的样式

el:link el:visited el:hover el:active

这四个如果用于a标签,顺序要严格排序

el:focus
设置元素onfocus时的样式

el:lang(fr)
匹配 使用特殊语言 的el元素

el:not(s)
匹配 不含有s选择符 的el元素

el:root
匹配el元素在文档的根元素

el:first-child el:last-child el:only-child
匹配 父元素的 第一个/最后一个/唯一一个 子元素(且这个元素是el元素)

el:nth-child(n) el:nth-last-child(n)
匹配 父元素的正数/倒数 第n个子元素el

el:first-of-type el:last-of-type el:only-of-type
匹配 与el同类型的 第一个/最后一个/唯一一个 同级兄弟元素el

el:nth-of-type(n) el:nth-last-of-type(n)
匹配 与el同类型的 正数/倒数 第n个同级兄弟元素el

first-child 和 first-of-type需要区分

  • p:first-child
    匹配的第一个子元素,且这个子元素必须是p,否则匹配不到
  • p:first-of-type
    匹配到的是第一个p元素,只有子元素里面没有p才会匹配不到

el:empty
匹配 没有子元素的el元素

el:checked
匹配 被选中的el元素

el:enabled el:disabled
匹配 页面上 可用/禁用 的元素el

el:target
匹配 相关url指向的el元素

@page:first @page:left @page:right
设置页面容器第一面使用的样式
设置页面容器位于装订线 左侧/右侧 的所有页面使用的样式
仅用于@page规则