css伪类 & 伪元素

css伪类伪元素 *一直对css中伪类伪元素的理解和使用稀里糊涂,看一下搞清楚到底怎么回事什么意思怎么使用*

伪元素:对元素中的特定内容进行操作,选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作.它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素
::before 在元素内容之前插入额外生成的内容
::after 在元素内容之后插入额外生成的内容
::first–letter 选取元素的首个字符
::first–line 选取元素的第一行
::selection 对用鼠标键盘等已选取的文字部分应用样式
::spelling-error
::grammar-error

伪类:由于元素状态是动态变化的,所以一个元素特定状态改变时,它可能得到或失去某个样式.因为功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类
*好理解的地方就是用超链接a标签去理解 注释解释一些常用的伪类吧*
:target 如果url中的hash部分和页面中的锚点元素匹配,则对应页面元素可以应用到有:target定义的样式
:link 超链接点击之前
:hover 鼠标放在标签上的时候
:active 鼠标点击标签但是不松手的时候
:visited 链接被访问过之后
:focus 某个标签获得焦点时的样式
:not 用:not过滤掉不符合的元素,括号中可以应用几乎所有的选择器语法 也可以搭配其他伪类使用
:lang
:enabled
:disabled
:required
:optional
:checked
:in-range
:out-of-range
:valid
:invalid
:first-child 选中列表中的第一个元素
:last-child 选中列表中的最后一个元素
:only-child
:nth-child()
:nth-last-child() 与:nth-child()不同的是这个是从最后一个元素开始计算的
:empty
:first-of-type
:last-of-type
:only-of-type
:nth-of-type()
:nth-last-of-type()
原文地址:https://www.cnblogs.com/zhenjianyu/p/12965186.html