css伪类和伪元素的区别(伪元素)

大家好，今天小编来为大家解答css伪类和伪元素的区别这个问题，伪元素很多人还不知道，现在让我们一起来看看吧！

css伪元素和伪类的区别

简单的来说，伪类是针对CSS，而伪元素是针对HTML，伪类选择器是CSS选择器的一种，而伪类是“假”的HTML标签

伪类（选择器）本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；

伪元素本质上是创建了一个有内容的虚拟容器；

在CSS3中，伪类和伪元素的语法得到了进一步的调整（一个冒号和两个冒号）；

在开发当中，可以同时使用多个伪类，而只能同时使用一个伪元素。

CSS伪类和伪元素的区别及相关应用

伪类：用于向某些选择器添加特殊的效果

伪元素：用于将特殊的效果添加到某些选择器

伪类的效果可以通过添加实际的类来实现

伪元素的效果可以通过添加实际的元素来实现

它们的本质区别就是是否抽象创造了新元素

<p>

<em>This</em>

<em>is a text</em>

</p>

如果我想让T这个字母单独变成红色，如果使用伪类的话，我需要找个标签把t单独包起来在进行设置对吧，但是我可以用伪元素::first-letter，来直接进行设置，换句话说要用伪类必须是实际存在的元素，而伪元素就不需要

本答案出自“我要编程”软件开发师训练平台免费课程。

伪类和伪元素的区别

两者的定义：

伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

我自己的理解：

伪类，类，class是一个类，就类似class这样，表示一些元素的状态的，但是无须标识的分类。

伪元素，就是一个元素，类似p标签元素，等等，逻辑上存在，但是实际并不存在在文档树中。

另外一个简单的理解和区分就是：

伪类前面是一个冒号，为元素前面是两个冒号。E:first-child伪类，E::first-line为元素。

特殊情况::before和::after伪元素

before和after是在元素前面和后面添加一些元素，因此是伪元素，CSS3选择器中已经将其前面变为两个冒号了。请看：w3cselect

问题来了，那么为什么我们平时用before和after前面就一个冒号？

当你看了css2选择器就知道了，老的规范中，伪类和伪元素都用一个冒号，新规范为了区分，伪元素统一用两个“：：”,所以，大家注意了，往后在写css3的时候，为元素要用两个冒号，伪类用一个冒号。

伪类和伪元素的应用

我之前的css常用效果，讲了一些。

像伪元素

::-webkit-scrollbar

::selection

::-webkit-input-placeholder

::after

等等。

伪元素中用的最多的要数::after和::before了

可以用这两个伪元素做很多效果！

html

<a rel="external nofollow" href="#">haorooms</a>

css

a{

position: relative;

display: inline-block;

outline: none;

text-decoration: none;

color:#000;

font-size: 32px;

padding: 5px 10px;

}

a:hover::before, a:hover::after{ position: absolute;}

a:hover::before{ content:"\5B"; left:-20px;}

a:hover::after{ content:"\5D"; right:-20px;}

其中content中可以用attr也可以用url

例如：

a：:after{ content:"(" attr(href)")";}

h1::before{ content: url(logo.png);}

伪类中用的最多的要数：nth-child()选择器了，关于nth-child()，我之前有篇文章介绍过。

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

文章分享结束，css伪类和伪元素的区别和伪元素的答案你都知道了吗？欢迎再次光临本站哦！