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;}

看起来就会简洁很多。