HTML中常见伪类和伪元素的区别

Posted 2023-04-17

参考技术A 两者的定义：
伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(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
haorooms

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的时候，伪类和伪元素很容易混淆。当时看了很多区别文章还是迷糊。只有自己总结的东西才是自己的，我把我的方法介绍给你吧，对你可能有用。

先看看w3c对伪类和伪元素的定义及种类：

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

---

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

---

1、伪类 向选择器添加特殊效果，我们可以把选择器当成一个目标选择器，就相当于给一个选择器添加多种特殊效果。伪类即［一对多］

伪元素 将特殊效果添加到选择器，伪元素里面的效果是多样的，选择器还是一个。伪元素即［多对一］

无论是一对多还是多对一，都针对的是一个选择器，只是前后顺序差异。

2、伪类需要给元素添加class或者id，或者一些标签，如span。改变了文档结构。而伪元素则不用。