【CSS】伪元素和伪类选择器区别
1.伪类选择器和伪元素选择器
伪类选择器是用来向某些选择器来添加效果。【:】
（1）结构伪类选择器：
:first-child
:last-child
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-child
:only-of-type
:root
:empty
（2）反选伪类选择器：
父元素 （空格） :not（标签名）
（3）目标伪类选择器：
:target
（4）UI元素状态选择器：
:enabled
:disabled
:checked
（5）动态伪类选择器：
:link
:visited
:hover
:active
（6）用户行为伪类选择器
:focus
伪元素选择器则是用来将特殊的效果添加在选择器上。【::】
常见伪元素选择器：
::after
::before
::first-letter
::first-line
::selection
::placeholder
其本质上在于是否创建了新的元素：伪类不修改DOM容，通过一些特定的选择器根据特定的状态，特定条件来修改元素的样；而伪元素可能改变DOM结构，创造了虚拟的DOM
伪类选择器只是相当于给标签加上了个名字，让我们能够找到精准的位置，而伪元素选择器修改了他原本的结构
2.注意
可通过使用css伪类实现点击元素变色的效果，两个伪类是:active, :focus
:active
:active选择器用于选择活动链接。当在一个链接上点击时，它就会成为活动的（激活的），:active选择器适用于所有元素，不仅限于链接a元素
:focus
:focus 选择器用于选取获得焦点的元素。仅接收键盘事件或其他用户输入的元素允许 :focus 选择器
3.测试代码
<view class="buttonArea">
<button @click="login" >登录</button>
</view>
button{
background-color: #7700b3;
color: white;
margin-top: 20rpx;
}
button :focus{
background-color: crimson;
}