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()