【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;
	}