[CSS] 段落第一個字變大

CSS可以控制段落的第一個字變大。
在CSS裡有四種的虛擬元素pseudo-element。

Pseudo-element	Purpose	IE	F	N	W3C
:first-letter	增加樣式到文字內容(text)的第一個字	5	1	8	1
:first-line	增加樣式到文字內容(text)的第一行	5	1	8	1
:before	插入一些內容在這個元素之前		1.5	8	2
:after	插入一些內容在這個元素之後		1.5	8	2

使用 :first-letter 讓第一個字變大。

以無名的網誌為例，文章的內容放在類別為innertext的容器內。

//  無名網誌的文章結構

<div class="innertext">
 <p>這是文章內容</p>
  <p>這是文章內容</p>
</div>

如果要讓每個段落的第一個字變大，可以這樣做

//  讓第一個字變大的CSS語法

div.innertext p:firest-letter { font-size: 200%; }

selector.className selector:pseudo-elements { property: value; }

選擇子.樣式名稱 選擇子:擬態元素 { 屬性: 值 ; }

重要：IE瀏覽器對於虛擬元素有個bug，在虛擬元素的名稱宣告結束與{之間要加入空格。如果緊接著{，會發生錯誤，使得描述無效。

p:first-letter{font-size: 200%;}
p:first-letter {font-size: 200%;}
              ^就是少打這個空格，整個趕鈴羊

以下是原文

Problem

When the space is removed between the pseudo element and the first curly brace, the selector will not be applied. For example:

select:pseudo-element{ declaration }
                     ^ space removed

To prevent the problem, ensure a space is added:

select:pseudo-element { declaration }
                      ^ space preserved

參考連結 - IE 6 pseudo elements bug