CSS伪类和伪元素的区别是什么-创新互联

这篇文章主要讲解了“CSS伪类和伪元素的区别是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS伪类和伪元素的区别是什么”吧！

专注于为中小企业提供成都网站建设、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业共青城免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

首先，阅读 w3c 对两者的定义：

CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。

可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

伪类种类

伪元素种类

区别

这里用伪类:first-child 和伪元素 :first-letter 来进行比较。

代码如下:


p>i:first-child {color: red}
<p>
   <i>first</i>
   <i>second</i>
</p>

 //伪类:first-child 添加样式到第一个子元素
如果我们不使用伪类，而希望达到上述效果，可以这样做：

代码如下:

.first-child {color: red}
<p>
   <i class="first-child">first</i>
   <i>second</i>
</p>

即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素：

代码如下:

p:first-letter {color: red}
<p>I am stephen lee.</p>

//伪元素:first-letter 添加样式到第一个字母
那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？

代码如下:

.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>

即我们给第一个字母添加一个span，然后给span 增加样式。
两者的区别已经出来了。那就是：

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

总结

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

简单的说呢:伪元素的权重比伪类高，比如一个容器的为元素和伪类都定义了同一属性，但值不一样，那么将采用伪元素的。 从规范的角度伪元素一个页面只使用一次，而伪类可以多次使用。伪元素产生新对象，在Dom中看不到，但是可以操作；伪类是Dom中一个元素的不同状态；

感谢各位的阅读，以上就是“CSS伪类和伪元素的区别是什么”的内容了，经过本文的学习后，相信大家对CSS伪类和伪元素的区别是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联网站建设公司，，小编将为大家推送更多相关知识点的文章，欢迎关注！

标题名称：CSS伪类和伪元素的区别是什么-创新互联
文章转载：https://www.cdcxhl.com/article0/shdoo.html

成都网站建设公司_创新互联，为您提供网站改版、品牌网站制作、关键词优化、App设计、用户体验、响应式网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联