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.测试代码
代码语言：javascript复制 <view class="buttonArea">
<button @click="login" >登录</button>
</view>
button{
background-color: #7700b3;
color: white;
margin-top: 20rpx;
}
button :focus{
background-color: crimson;
}
