CSS伪类和伪元素的区别详解
发布时间：2014-11-23 11:16:14 作者：佚名 
我要评论
我要评论伪类和伪元素不是真正意义上的html存在的类和元素,他们的存在是为了方便对状态和位置进行样式定义。具体他们之间有什么区别呢，这就是今天我们需要讨论的问题了
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
首先，阅读 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中一个元素的不同状态；
相关文章
这篇文章主要介绍了详解如何使用CSS3中的结构伪类选择器和伪元素选择器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面2020-01-06- CSS伪元素能使我们添加案定的HTML元素之外的元素,这里我们就来解析CSS中的伪元素及其与伪类的区别,需要的朋友可以参考下2016-06-27
- 这篇文章主要介绍了详解CSS中的伪类与伪元素及二者间的区别,实际上CSS3中规范了一种简单粗暴的方法,即伪类前用一个冒号表示,而伪元素前用两个冒号表示,这样就不容易混淆了,2016-04-28
- 本文向大家展示了CSS的伪类与伪元素，介绍的非常全面，这里推荐给大家参考下。2014-12-04
- 无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准2014-09-04
- CSS伪类及伪元素选择器，如超链接的a：link、a：visited、a：hover等等，本文整理了一些，喜欢的朋友可以收藏下2013-11-27
- css伪类伪元素域高级选择器的介绍，需要的朋友可以参考一下2013-02-26
- 关于两者的区别，其实是很古老的问题.这里着重写的是为什么这两者不同，以及一些平时容易错过的细节,需要的朋友可以参考下2012-12-07
这篇文章主要介绍了浅谈CSS 伪元素&伪类的妙用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-09-01
最新评论