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

看起來就會簡潔很多。