# 区别
伪类的效果可以通过添加实际的类实现,
伪元素的效果可以通过添加实际的元素来实现。
伪元素:不存在于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规则