CSS伪类和伪元素的区别及相关应用

伪类

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的属性。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

:link :visited :hover :active

:root :not(selector) :valid :invalid

:required :optional 选择没有required属性的元素

:in-range :out-of-range

:checked :disabled :enabled

:empty 选择没有子元素的元素

:first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type(n) :only-of-type 同一级中的某一个

:last-child :nth-child(n) :nth-last-child(n) :first-child :only-child 是父元素中唯一一个子元素

:target 当前目标元素

伪元素

类似于行内块级元素

伪元素是对元素中的特定内容进行 *** 作，它所 *** 作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

::selection 用户选中高亮的部分 ::backdrop 全屏模式设置下层文档样式 ::first-line ::first-letter ::before ::after

类是一种数据结构，是面向对象思想的执行者。现代面向对象的语言都支持“类”这种结构。伪类顾名思义就是，不是类的数据结构，因为语言本身不支持（例如vb6.0以前），但是又为了达到类的境界，于是就产生了伪类。通俗点就是伪类和伪娘有些类似，虽然没有女生的本质，但是外表看起来差不多。说到伪娘，让我想到了有一年春节联欢晚会的一首歌名叫做《万水千山总是情》，歌曲荡气回肠，唱出了90后香港回归的热情，唱出了我们穷人的心声。为了支援世博会，请爱护小动物，从我做起，奋发图强，学习雷锋，不怕死的精神。因为明天会更好，愿我们的祖国繁荣富强，夫妻双双把家还。

对于我们动态添加样式，可以在:style里面，但是伪类动态添加就不行了，我就在想能不能在data中定义，然后在伪类中使用

我是在一个组件中使用的，小伙伴只需要看伪类动态的样式即可

---