伪类与伪元素

一时失言乱红尘 2022-09-30 03:47 248阅读 0赞

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

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

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

## 伪类种类 ##

![bVcccn][]

## 伪元素种类 ##

![bVccco][]

## 区别 ##

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

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

![bVcccr][] //伪类 `: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>

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

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

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

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

## 总结 ##

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

:Pseudo-classes ::Pseudo-elements

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

[bVcccn]: /images/20220708/92ca913440964e89af542b759e87ae91.png
[bVccco]: /images/20220708/1cac7ce34e9c44869f54d4c372aab364.png
[bVcccr]: /images/20220708/424ce6ad8dc54585902f2bc96c930471.png
[bVcccs]: /images/20220708/0b2680207ae940f1ba7f6cd67709fef7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关伪类伪元素 css3_伪类| CSS

伪类伪元素 css3 These classes are basically used to add special effects to some selectors o

迈不过友情╰/ 2023年03月05日 10:59/ 0 赞/ 6 阅读

相关 css 伪类、伪元素

一、伪类、伪元素的共同点 1. 伪类、伪元素存在的原因： css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比

青旅半醒/ 2022年12月18日 03:55/ 0 赞/ 184 阅读

相关 CSS伪类和伪元素

为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列

ゝ一世哀愁。/ 2022年12月06日 12:45/ 0 赞/ 246 阅读

相关伪类与伪元素

首先，阅读 `w3c` 对两者的定义： `CSS` 伪类用于向某些选择器添加特殊的效果。 `CSS` 伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第

一时失言乱红尘/ 2022年09月30日 03:47/ 0 赞/ 249 阅读

相关 css伪类与伪元素

在css1中就引入了伪类和伪元素的概念，伪类可以对一个元素的不同状态或者类型进行区分，添加特殊效果。伪元素能为元素的组成部分，或是文本结点内容添加特殊效果。

电玩女神/ 2022年07月26日 00:06/ 0 赞/ 322 阅读

相关伪类与伪元素比较说明

CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器伪类.jpg 伪元素种类.jpg 总结：伪类偏向于元素的

一时失言乱红尘/ 2022年06月02日 08:26/ 0 赞/ 231 阅读

相关伪类与伪元素的区别

W3C关于伪类伪元素的定义伪类：用于向某些选择器添加特殊的效果。伪元素：将特殊的效果添加到某些选择器上。明确两点： 1 都

太过爱你忘了你带给我的痛/ 2022年05月22日 03:05/ 0 赞/ 267 阅读

相关伪类与伪元素

一、伪类伪类包含两种：状态伪类（UI 伪类）和结构性伪类。 (1)状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素

野性酷女/ 2022年03月02日 04:08/ 0 赞/ 364 阅读

相关伪元素与伪类的使用

伪元素伪类听名字可能就会产生迷惑，其实从名称上我们也可以获取一些信息，伪元素——顾名思义是一个元素，伪类——与类class有关系，不是一个元素！在CSS1和CSS2中对伪类

傷城~/ 2021年09月20日 15:32/ 0 赞/ 438 阅读

相关 css中的伪类与伪元素

a:link { } / 未访问链接/ a:visited { }/ 已访问链接 / a:hover {

桃扇骨/ 2021年09月15日 06:14/ 0 赞/ 452 阅读