CSS伪类和伪元素的区别

具体的说明这篇文章写的已经非常清楚啦！CSS伪类和伪元素的区别

主要记录一下个人的理解方式。

伪类其实就是把原本需要写的class属性改成用伪类来让这个标签有一个假的class属性。

如果用普通方式写：

<ul>

<li class="first-item">

我是第一个

</li>

<li>

我是第二个

</li>

</ul>

li.first-item {

color: orange}

如果用伪类写：

<ul>

<li>

我是第一个

</li>

<li>

我是第二个

</li>

</ul>

li:first-child {

color: orange}

伪元素也是同样的道理，如果用普通方式写：

<p><span class="first">

H

</span>

ello World, and wish you have a good day!

</p>

.first {

font-size: 5em;}

but！如果用伪元素可以这样写

<p>

Hello World, and wish you have a good day!

</p>

p:first-letter {

font-size: 5em;}

看起来就会简洁很多。