CSS 技巧篇(四)：僞類與僞元素的區別

1、僞類介紹

CSS 僞類用於向某些選擇器添加特殊的效果。

2、僞元素介紹

CSS 僞元素用於將特殊的效果添加到某些選擇器。

3、區別

咱們經過使用僞類 :first-child 和僞元素 :first-letter 來進行比較。

1）、僞類:first-child 添加樣式到第一個子元素

div>p:first-child{color:red;} 

<div>
  <p>我是第一個</p>
  <p>我是第二個</p>
</div>
複製代碼

---

若是咱們不使用僞類，而但願達到上述效果，能夠這樣作：

.first-p{color:red;}
<div>
  <p class="first-p">我是第一個</p>
  <p>我是第二個</p>
</div>
複製代碼

即咱們給第一個子元素添加一個類，而後定義這個類的樣式。

2）、僞元素:first-letter 添加樣式到第一個字母

h3::first-letter{color:blue;}
<h3>I love Js</h3>
複製代碼

---

那麼若是咱們不使用僞元素，要達到上述效果，應該怎麼作呢？

span.first-letter{color:blue;}
<h3><span class="first-letter">I</span> love Js</h3>
複製代碼

即咱們給第一個字母添加一個 span，而後給 span 增長樣式。

4、總結

CSS 僞類用於向某些選擇器添加特殊的效果。
CSS 僞元素用於將特殊的效果添加到某些選擇器。

僞類的效果能夠經過添加一個實際的類來達到，而僞元素的效果則須要經過添加一個實際的元素才能達到，這也是爲何他們一個稱爲僞類，一個稱爲僞元素的緣由。