【CSS】伪元素和伪类选择器区别_css中伪类和伪元素选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50927106/article/details/126681578

本文详细讲解了CSS中的伪类选择器（如：:hover, :active）和伪元素选择器（如::before, ::after）的应用，展示了如何利用它们改变元素状态和创建虚拟DOM结构。重点介绍了如何通过`:active`和`:focus`实现点击反馈，以及两者在用户体验上的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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