首先声明 : 伪类与伪元素的本质区别为是否创造了新元素
伪类( :):存在DOM文档中,为辅助类,不写在html中,但却为原来对元素的描述做到补充
伪元素选择符( :: ):不存在在DOM文档中,是虚拟的元素,是创建新元素,为某个元素的子元素
常见伪类: :before :after :first-child(卖个关子,事实上都不是伪类,以下将会阐述为什么) ----对被选择的元素进行类的补充描述
p ::before 和 ::after是伪元素,则会创建元素,则会为p元素的子元素"222"的前后都创建一个子元素,前是::before,后是::after
回过头来我们来看:after和:before
发现竟然是一样的!!!
原来我翻阅资料才知道,在css中中伪类一直用 : 表示,如 :hover, :active 等
伪元素在css中也已经存在,当时最经典的代表就是:before与:after
后来经过css3的修订,把:before和:after修改为::before和::after以此来以写法的形式来区别(::伪元素)和(:伪类)的不同,所以说::before和:before没有本质的不同,只不过是css不同发展时期写法的演变和象征着伪类和伪元素的区分清晰。同样这样的过渡情况也落在了:first-letter和:first-line两者,无论(::)还是(:)其实都是伪元素,
其实本质上创建一个新元素,可以想象成<p>what's going on?</p>变成了<p><span style=“color:red”>what's going on?</span></p>,用创建的新元素包住原来的元素
接下来我们以画面的形式再呈现一下,伪类和伪元素的不同:
这才是真正的伪类选择器,只为该元素增加一个辅助类,辅助类描述为color:red !
常用伪类有:
:active 选择正在被激活的元素(匹配指定状态)
:hover 选择被鼠标悬浮着的元素(匹配指定状态)
:link 选择未被访问的元素 (匹配指定状态)
:first-child 选择满足是其父元素的第一个子元素的元素
:last-child 选择满足是其父元素的最后一个子元素的元素
:disable 选择每个已禁止的元素
:enable 选择每个已启动的元素
:checked 选择每个被选中的元素
:nth-child(n) 选择满足是其父元素的第n个子元素的元素
其中n的阐述部分可以多样化,例如 3n n+3 代表3的倍数 从n(1)+3==4,第四个元素开始
常用伪元素有:
::after (或者说是:after,以下部分相同)在指定元素的内容后面插入内容
::before 在指定元素的内容前面插入内容
::first-letter 选择指定元素的第一个单词
::first-line 选择指定元素的第一行
善用工具,也善洞悉本质!